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

Question

I'm working on a plugin for Shopware 6.5, and I'm encountering an issue with loading custom SVG icons. The plugin worked fine in Shopware 6.4, but after upgrading to 6.5, I'm getting the following error:

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

Here's my code for the custom Webpack configuration (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,
                    },
                },
            ],
        },
    };
};

This is how I import and register my custom SVG icons in 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;
    }, []);
})();

This is the twig where i'm using it:

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

Path to svg image:

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

I've already checked the following:

1.The path to the SVG files is correct and points to the directory containing the SVG files.

2.I've cleared caches, temporary files, and generated assets, then re-run the build process.

Despite trying these steps, I still get the same error. What could be causing this issue, and how can I resolve it? Any help would be appreciated.

Answer 1

Since Shopware 6.5 the meteor icon kit is being used. Furthermore most icons are being loaded async. The naming convention intends that the word before the first dash is the folder the icon is in. So for example regular-circle will be resolved into an asynchronous import like so:

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

See the sw-icon component for reference.

That should explain why your custom icon can't be resolved within a foreign vendor directory at @shopware-ag/meteor-icon-kit/icons/image/name-multicolor.svg.

You could try adding a path alias to your webpack config pointing to your custom icons.