1

I try to use Ant Design Vue with NUXT. I install nuxt with the commande line npm init nuxt-app And I choose Ant Design Vue. It works perfectly.

But when I try to personnalize the theme (https://www.antdv.com/docs/vue/customize-theme/), it does not work.

I add less with npm but when I want to add less-loader I have this error message :

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: webpack@5.26.2 npm ERR! node_modules/webpack npm ERR! peer webpack@">=2" from babel-loader@8.2.2 npm ERR! node_modules/babel-loader npm ERR!
babel-loader@"^8.2.2" from @nuxt/webpack@2.15.3 npm ERR!
node_modules/@nuxt/webpack npm ERR! @nuxt/webpack@"2.15.3" from @nuxt/builder@2.15.3 npm ERR! node_modules/@nuxt/builder npm ERR! @nuxt/builder@"2.15.3" from nuxt@2.15.3 npm ERR!
node_modules/nuxt npm ERR! 1 more (nuxt) npm ERR! peer webpack@"^4.27.0 || ^5.0.0" from css-loader@4.3.0 npm ERR!
node_modules/css-loader npm ERR! css-loader@"^4.3.0" from @nuxt/webpack@2.15.3 npm ERR! node_modules/@nuxt/webpack npm ERR! @nuxt/webpack@"2.15.3" from @nuxt/builder@2.15.3 npm ERR!
node_modules/@nuxt/builder npm ERR! @nuxt/builder@"2.15.3" from nuxt@2.15.3 npm ERR! node_modules/nuxt npm ERR! 1 more (nuxt) npm ERR! peer css-loader@"*" from vue-loader@15.9.6 npm ERR! node_modules/vue-loader npm ERR!
vue-loader@"^15.9.6" from @nuxt/webpack@2.15.3 npm ERR!
node_modules/@nuxt/webpack npm ERR! @nuxt/webpack@"2.15.3" from @nuxt/builder@2.15.3 npm ERR! node_modules/@nuxt/builder npm ERR! 1 more (nuxt) npm ERR! 12 more (extract-css-chunks-webpack-plugin, file-loader, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from @nuxt/friendly-errors-webpack-plugin@2.5.0 npm ERR! node_modules/@nuxt/friendly-errors-webpack-plugin npm ERR!
@nuxt/friendly-errors-webpack-plugin@"^2.5.0" from @nuxt/webpack@2.15.3 npm ERR! node_modules/@nuxt/webpack npm ERR!
@nuxt/webpack@"2.15.3" from @nuxt/builder@2.15.3 npm ERR!
node_modules/@nuxt/builder npm ERR! @nuxt/builder@"2.15.3" from nuxt@2.15.3 npm ERR! node_modules/nuxt npm ERR! 1 more (nuxt) npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/chtouk/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR!
/Users/chtouk/.npm/_logs/2021-03-17T09_53_47_196Z-debug.log

So I tried to fix this with --force or --legacy-peer-deps but when I run my app with npm run dev, there is a new error message :

ERROR Rule can only have one resource source (provided resource and test + include + exclude) in {
10:59:59 "use": [ { "loader": "/Applications/MAMP/htdocs/myproject/node_modules/babel-loader/lib/index.js", "options": { "configFile": false, "babelrc": false, "cacheDirectory": true, "envName": "client", "presets": [ [ "/Applications/MAMP/htdocs/myproject/node_modules/@nuxt/babel-preset-app/src/index.js", { "corejs": { "version": 3 } } ] ] }, "ident": "clonedRuleSet-4[0].rules[0].use[0]" } ] }

"use": [ { "loader": "node_modules/babel-loader/lib/index.js",
"options": { "configFile": false, "babelrc": false,
"cacheDirectory": true, "envName": "client", "presets": [ [
"node_modules/@nuxt/babel-preset-app/src/index.js", { "corejs": { "version": 3 } } ] ] }, "ident": "clonedRuleSet-4[0].rules[0].use[0]" } ] }

How can I fix it and personalize my theme ?

Thanks a lot for helping

chtouk
  • 303
  • 4
  • 13

0 Answers0