最近正在学习《Vue.js项目实战》这本书。
由于该书的出版时间较久远,且实例基于vue2,很多用例使用的版本都比较旧但又没有指出具体版本。
在学习第五章时,又是一片飘红,报错如下:
ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-40d62f2b","scoped":true,"hasInlineConfig":false}!./node_modules/stylus-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/AppLayout.vue
Module build failed: TypeError: Class constructor Visitor cannot be invoked without 'new'
at new ImportVisitor (/support-center/node_modules/stylus-loader/lib/listimports.js:10:11)
at listImports (/support-center/node_modules/stylus-loader/lib/listimports.js:72:23)
at /support-center/node_modules/stylus-loader/lib/pathcache.js:295:15
at tryCatchReject (/support-center/node_modules/when/lib/makePromise.js:840:30)
at runContinuation1 (/support-center/node_modules/when/lib/makePromise.js:799:4)
at Fulfilled.when (/support-center/node_modules/when/lib/makePromise.js:590:4)
at Pending.run (/support-center/node_modules/when/lib/makePromise.js:481:13)
at Scheduler._drain (/support-center/node_modules/when/lib/Scheduler.js:62:19)
at Scheduler.drain (/support-center/node_modules/when/lib/Scheduler.js:27:9)
at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
@ ./node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-40d62f2b","scoped":true,"hasInlineConfig":false}!./node_modules/stylus-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/AppLayout.vue 4:14-341 13:3-17:5 14:22-349
@ ./src/components/AppLayout.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
^C%
上网查了很多资料,有说修改webpack.config.js内容的,有说要改package.json的,也有说是版本过高问题的。
但无论怎么改,它就是爆红,简直见鬼。
后来发现,确实是版本问题,但不是stylus-loader版本的问题,而是stylus本身的版本过高。
` npm install stylus@0.54.5 --save-dev`
把stylus的版本也改低,报错就解决了。