Relative module not found!

[faiqali1]

I am trying to add an SVG

import fastapi from "./public/icon/fastapi.svg";
export default {
  name: "skills",
  components: {
    fastapi,
  },
};

I keep getting this error:

This relative module was not found:

* ./public/icon/fastapi.svg in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/skills.vue?vue&type=script&lang=js

The files are stored here:

and this is the vue.config.js file:

[faiqali1]

I moved the files from the public directory to the assets directory

and now I am getting this error:

ERROR  Failed to compile with 1 error                                                                                         2:01:58 PM
 error  in ./src/assets/icon/fastapi.svg

Syntax Error: Error:

Vue packages version mismatch:

- vue@3.2.18 (D:\Projects\Profile website\portfolio\node_modules\vue\index.js)
- vue-template-compiler@2.6.14 (D:\Projects\Profile website\portfolio\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/skills.vue?vue&type=script&lang=js 1:0-48 5:13-20
 @ ./src/components/skills.vue?vue&type=script&lang=js
 @ ./src/components/skills.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.138:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Any help would be greatly appreciated.

[supryantowp]

svgRule
      .use('vue-loader')
      .loader('vue-loader') 
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')

change to

svgRule
      .use('vue-loader')
      .loader('vue-loader-v16') // or `vue-loader-v16` if you are using a preview support of Vue 3 in Vue CLI
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')

[cnicodeme]

Hi!

I'm re-opening it as I'm having the same issue despite settings "vue-loader-v16".

Here's my vue.config.js :

module.exports = {
    runtimeCompiler: true,
    chainWebpack: config => {
        config.resolve.alias.set('vue', '@vue/compat')

        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return {
                    ...options,
                    compilerOptions: {
                        compatConfig: {
                            MODE: 3
                        },
                        whitespace: 'preserve'
                    }
                }
            })

        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule
            .use('vue-loader')
            .loader('vue-loader-v16') // or `vue-loader-v16` if you are using a preview support of Vue 3 in Vue CLI
            .end()
            .use('vue-svg-loader')
            .loader('vue-svg-loader')
    }
}

I have the same error as mentioned.

[cnicodeme]

Update: Installing `vue-svg-loader@0.17.0-beta.5" fixed the issue.