Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Nikkolast88 opened this issue Oct 19, 2021 · 1 comment
Open

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

Nikkolast88 opened this issue Oct 19, 2021 · 1 comment

Comments

@Nikkolast88
Copy link

Nikkolast88 commented Oct 19, 2021

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
Copy link

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"
 },
  1. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants