Uncaught (в обещании) Ошибка: не удается найти модуль «./image/name-multicolor.svg» в Shopware 6.5

Я работаю над плагином для Shopware 6.5 и столкнулся с проблемой загрузки пользовательских значков SVG. Плагин отлично работал в Shopware 6.4, но после обновления до 6.5 я получаю следующую ошибку:

Uncaught (in promise) Error: Cannot find module './image/name-multicolor.svg'

Вот мой код для пользовательской конфигурации Webpack (webpack.config.js):


function resolve(dir) {
    return path.join(__dirname, '..', dir);
}

module.exports = (baseConf) => {
    // Exclude the plugin's icons from being loaded via a url-loader
    baseConf.config.module.rules.forEach((rule) => {
        if (rule.loader === 'url-loader') {
            if (!rule.exclude) {
                rule.exclude = [];
            }
            rule.exclude.push(resolve('src/app/assets/icons/svg'));
        }
    });

    // Add svg-inline-loader for the plugin icons
    return {
        module: {
            rules: [
                {
                    test: /\.svg$/,
                    include: [
                        resolve('src/app/assets/icons/svg'),
                    ],
                    loader: 'svg-inline-loader',
                    options: {
                        removeSVGTagAttrs: false,
                    },
                },
            ],
        },
    };
};

Вот как я импортирую и регистрирую свои пользовательские значки SVG в icons.js:

    const context = require.context('./svg', false, /svg$/);

    return context.keys().reduce((accumulator, item) => {
        const componentName = item.split('.')[1].split('/')[1];
        const component = {
            name: componentName,
            functional: true,
            render(createElement, elementContext) {
                const data = elementContext.data;

                return createElement('span', {
                    class: [data.staticClass, data.class],
                    style: data.style,
                    attrs: data.attrs,
                    on: data.on,
                    domProps: {
                        innerHTML: context(item),
                    },
                });
            },
        };

        accumulator.push(component);
        return accumulator;
    }, []);
})();

Это ветка, где я ее использую:

{% block settings_icon %}
    <sw-icon name = "image-name-multicolor" size = "30" multicolor></sw-icon>
{% endblock %}

Путь к svg-изображению:

src/Resources/app/administration/src/app/assets/icons/svg/icons-image-name-multicolor.svg

Я уже проверил следующее:

1.Путь к файлам SVG правильный и указывает на каталог, содержащий файлы SVG.

2. Я очистил кеши, временные файлы и сгенерированные активы, а затем повторно запустил процесс сборки.

Несмотря на попытки выполнить эти шаги, я все равно получаю ту же ошибку. Что может быть причиной этой проблемы, и как я могу ее решить? Любая помощь будет оценена по достоинству.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Начиная с Shopware 6.5 используется набор иконок метеора. Кроме того, большинство иконок загружаются асинхронно. Соглашение об именах предполагает, что слово перед первым тире — это папка, в которой находится значок. Так, например, regular-circle будет преобразован в асинхронный импорт следующим образом:

import('@shopware-ag/meteor-icon-kit/icons/regular/circle.svg')

Для справки см. компонент sw-icon.

Это должно объяснить, почему ваш пользовательский значок не может быть разрешен в каталоге стороннего поставщика в @shopware-ag/meteor-icon-kit/icons/image/name-multicolor.svg.

Вы можете попробовать добавить псевдоним пути в конфигурацию вашего веб-пакета, указывающий на ваши пользовательские значки.

Другие вопросы по теме

Похожие вопросы