Module not found: Error: Can't resolve 'vue-loader-v16'

[Nikkolast88]

vue：3.2.20 vue-cli：5.0.0-beta.6 vue-svg-loader：0.17.0-beta.2

vue.config.js chainWebpack: (config) => { const svgRule = config.module.rule('svg');

svgRule.uses.clear();
config.resolve.alias.set('@', path.resolve('./src'));

svgRule
  .oneOf('component')
  .resourceQuery(/component/)
  .use('vue-loader-v16')
  .loader('vue-loader-v16')
  .end()
  .use('vue-svg-loader')
  .loader('vue-svg-loader')
  .end()
  .end()
  .oneOf('external')
  .use('file-loader')
  .loader('file-loader')
  .options({
    name: 'assets/[name].[hash:8].[ext]',
  });
config.module
  .rule('fonts')
  .use('url-loader')
  .loader('url-loader')
  .options({
    limit: 4096,
    fallback: {
      loader: 'file-loader',
      options: {
        name: 'fonts/[name].[hash:8].[ext]',
        assetPath,
      },
    },
  })
  .end();
config.module
  .rule('images')
  .use('url-loader')
  .loader('url-loader')
  .options({
    limit: 10240,
    fallback: {
      loader: 'file-loader',
      options: {
        name: 'img/[name].[hash:8].[ext]',
        assetPath,
      },
    },
  });

},

[Aryan3212]

The error message is very self-explanatory but I know it still doesn't work. NPM might be to blame here, I was having a similar issue today. Sometimes dependencies cause conflicts and you inadvertently install versions of libraries you don't want. How to fix them?

1. Set the library version exactly in package.json if it's a direct dependency of your project.

2. If not, then you have to set resolutions at the top level of your package.json, something like this

   "resolutions": {
   "webpack": "4.46.0"
   },

3. This will ensure that all your dependencies stick to that version of webpack. Then you do the normal procedure, remove node_modules and package-lock.json and install again using npm i.

   OP doesn't probably need it now but this might help someone else.