Failed to resolve async component

[Aleksander Rem]

In my project we use dynamic icons as described in #51 and it has been working fine. But after upgrading vue-cli-plugins 4.1.2 -> 4.5.0 it has stopped working in unit tests (mocha + chai) with the following warning:

[Vue warn]: Failed to resolve async component: () => Promise.resolve(`@/assets/icons/svg/${this.filename}`).then(s => (0, _interopRequireWildcard2.default)(__webpack_require__("./src/components/visual/BaseIcon sync recursive")(s)))
Reason: Error: Cannot find module '@/assets/icons/svg/search.svg'

The dynamic icon (e.g. 'search.svg') is loaded like this:

    get dynamicIcon() {
        return () => import(
            /* WebpackChunkName: "icons" */
            /* WebpackMode: "lazy-once" */
            `@/assets/icons/svg/${this.filename}`)
    }

vue.config.js:

    chainWebpack: (config) => {
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule
            .use('babel-loader')
            .loader('babel-loader')
            .end()
            .use('vue-svg-loader')
            .loader('vue-svg-loader')
    },

The docs says to include a SVG shim if you use typescript and get "Cannot find module" error, but I have tried that and it doesn't work. It also seems to be relevant to explicit imports only, and not dynamic imports.

The icons still work in production. How can I make it work in tests again? Or at the very least suppress the warnings?

[Aleksander Rem]

After extensive testing it seems like the error is introduced with the following package versions (or later).

"@vue/cli-plugin-typescript": "4.2.0"
"@vue/cli-service": "4.2.0"
"typescript": "3.7.5"

If any of those are installed, the error is present. With the prior versions, the error goes away.

[aranoe]

Did you find a solution to this? I am using JavaScript and it doesn't work either.

[Aleksander Rem]

I did not. All SVG related tests are simply skipped currently.