Vue——Module build failed: TypeError: loaderContext.getResolve is not a function错误解决

情景再现

我使用了以下命令安装了 stylus 依赖包之后：

cnpm install stylus stylus-loader --save-dev

使用以下命令运行 Vue 项目：

npm start
#或者
npm run dev

会报Module build failed: TypeError: loaderContext.getResolve is not a function错误，完整错误信息如下：

14% building modules 35/36 modules 1 active ...orkspace\vue\xxx-client\src\App.vueD:\work\201222\workspace\vue\xxx-client\node_modules\_stylus-loader@4.3.1@stylus-loader\dist\utils.js:276const fileResolve = loaderContext.getResolve({^TypeError: loaderContext.getResolve is not a functionat createEvaluator (D:\work\201222\workspace\vue\xxx-client\node_modules\_stylus-loader@4.3.1@stylus-loader\dist\utils.js:276:37)at Object.stylusLoader (D:\work\201222\workspace\vue\xxx-client\node_modules\_stylus-loader@4.3.1@stylus-loader\dist\index.js:107:60)at LOADER_EXECUTION (D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:119:14)at runSyncOrAsync (D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:120:4)at iterateNormalLoaders (D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:232:2)at iterateNormalLoaders (D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:221:10)at D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:236:3at Object.context.callback (D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:111:13)at Object.module.exports (D:\work\201222\workspace\vue\xxx-client\node_modules\_vue-loader@13.7.3@vue-loader\lib\selector.js:21:8)at LOADER_EXECUTION (D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:119:14)at runSyncOrAsync (D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:120:4)at iterateNormalLoaders (D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:232:2)at D:\work\201222\workspace\vue\xxx-client\node_modules\_loader-runner@2.4.0@loader-runner\lib\LoaderRunner.js:205:4at D:\work\201222\workspace\vue\xxx-client\node_modules\_enhanced-resolve@3.4.1@enhanced-resolve\lib\CachedInputFileSystem.js:70:14at processTicksAndRejections (node:internal/process/task_queues:75:11)
npm ERR! code 1
npm ERR! path D:\work\201222\workspace\vue\xxx-client
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c webpack-dev-server --inline --progress --config build/webpack.dev.conf.jsnpm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxx\AppData\Local\npm-cache\_logs\2020-12-21T22_08_44_895Z-debug.log
npm ERR! code 1
npm ERR! path D:\work\201222\workspace\vue\xxx-client
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c npm run devnpm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxx\AppData\Local\npm-cache\_logs\2020-12-21T22_08_44_968Z-debug.log

错误原因

less-loader 的版本太高，虽然我没有用到 less-loader，但是我使用的 stylus-loader 是一个类似于 less 的依赖，此问题就是由于 stylus-loader 的版本过高导致的。

解决方案

卸载原来的 stylus-loader：

npm uninstall stylus-loader --save-dev

卸载失败，报以下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: ajv@5.5.2
npm ERR! node_modules/_ajv-keywords@2.1.1@ajv-keywords/node_modules/ajv
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer ajv@"^5.0.0" from _ajv-keywords@2.1.1@ajv-keywords@2.1.1
npm ERR! node_modules/_ajv-keywords@2.1.1@ajv-keywords
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 C:\Users\xxx\AppData\Local\npm-cache\eresolve-report.txt for a full report.npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxx\AppData\Local\npm-cache\_logs\2020-12-21T22_19_50_328Z-debug.log

我只好手动删除了。

首先修改 package.json 文件，删除以下内容：

"stylus-loader": "^4.3.1",

我的是在 devDependencies 下。

然后进入 node_modules 文件夹下，删除 _stylus-loader@4.3.1@stylus-loader文件夹。（4.3.1 是当前最新的版本号，你的有可能会和我的不一样，总之把当前的高版本 _stylus-loader 删掉就对了）

重新安装正确版本的 stylus-loader：

cnpm install stylus-loader@3.0.2 --save-dev

验证结果

使用以下命令运行 Vue 项目：

npm start
#或者
npm run dev

运行日志：

$ npm start> xxx@1.0.0 start
> npm run dev> xxx@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main 10% building modules 1/2 modules 1 active ...client\index.js?http://localhost:8 10% building modules 2/3 modules 1 active ...\webpack\hot nonrecursive /^\.\/lo 10% building modules 2/4 modules 2 active ...5@webpack-dev-server\client\socket 10% building modules 2/5 modules 3 active ...@webpack-dev-server\client\overlay 10% building modules 3/5 modules 2 active ...@webpack-dev-server\client\overlay 10% building modules 3/6 modules 3 active ...t\node_modules\_url@0.11.0@url\url 10% building modules 3/7 modules 4 active ...pack@3.12.0@webpack\hot\dev-server 10% building modules 4/7 modules 3 active ...pack@3.12.0@webpack\hot\dev-server 10% building modules 5/7 modules 2 active ...pack@3.12.0@webpack\hot\dev-server 10% building modules 6/7 modules 1 active ...pack@3.12.0@webpack\hot\dev-server 10% building modules 7/8 modules 1 active ...webpack@3.12.0@webpack\hot\emitter 10% building modules 7/9 modules 2 active ...orkspace\vue\xxx-client\src\main 10% building modules 7/10 modules 3 active ...es\_webpack@3.12.0@webpack\hot\lo 10% building modules 8/10 modules 2 active ...es\_webpack@3.12.0@webpack\hot\lo 10% building modules 8/11 modules 3 active ...\node_modules\_url@0.11.0@url\uti 10% building modules 8/12 modules 4 active ....12.0@webpack\hot\log-apply-resul 11% building modules 9/12 modules 3 active ....12.0@webpack\hot\log-apply-resul 11% building modules 10/12 modules 2 active ....12.0@webpack\hot\log-apply-resu 11% building modules 10/13 modules 3 active ...\_punycode@1.4.1@punycode\punyco 11% building modules 10/14 modules 4 active ...ng-es3@0.2.1@querystring-es3\ind 11% building modules 11/14 modules 3 active ...ng-es3@0.2.1@querystring-es3\ind 11% building modules 12/14 modules 2 active ...ng-es3@0.2.1@querystring-es3\ind 11% building modules 12/15 modules 3 active ...glevel@1.7.1@loglevel\lib\loglev 11% building modules 13/15 modules 2 active ...glevel@1.7.1@loglevel\lib\loglev 11% building modules 13/16 modules 3 active ...pack@3.12.0@webpack\buildin\modu 11% building modules 13/17 modules 4 active ...pack@3.12.0@webpack\buildin\glob 11% building modules 14/17 modules 3 active ...pack@3.12.0@webpack\buildin\glob 11% building modules 15/17 modules 2 active ...glevel@1.7.1@loglevel\lib\loglev 11% building modules 16/17 modules 1 active ...glevel@1.7.1@loglevel\lib\loglev 11% building modules 16/18 modules 2 active ...odules\_events@3.2.0@events\even 11% building modules 16/19 modules 3 active ..._strip-ansi@3.0.1@strip-ansi\ind 12% building modules 17/19 modules 2 active ..._strip-ansi@3.0.1@strip-ansi\ind 12% building modules 17/20 modules 3 active ...nt@1.1.5@sockjs-client\dist\sock 12% building modules 18/20 modules 2 active ...nt@1.1.5@sockjs-client\dist\sock 12% building modules 18/21 modules 3 active ...g-es3@0.2.1@querystring-es3\deco 12% building modules 18/22 modules 4 active ...g-es3@0.2.1@querystring-es3\enco 12% building modules 19/22 modules 3 active ...g-es3@0.2.1@querystring-es3\enco 12% building modules 19/23 modules 4 active ...s\_ansi-html@0.0.7@ansi-html\ind 12% building modules 20/23 modules 3 active ...s\_ansi-html@0.0.7@ansi-html\ind 12% building modules 20/24 modules 4 active ...ties@1.4.0@html-entities\lib\ind 12% building modules 21/24 modules 3 active ...ties@1.4.0@html-entities\lib\ind 12% building modules 22/24 modules 2 active ...ties@1.4.0@html-entities\lib\ind 12% building modules 22/25 modules 3 active ...dules\_vue@2.6.12@vue\dist\vue.e 12% building modules 23/25 modules 2 active ...dules\_vue@2.6.12@vue\dist\vue.e 12% building modules 24/25 modules 1 active ...dules\_vue@2.6.12@vue\dist\vue.e 13% building modules 25/26 modules 1 active ...orkspace\vue\xxx-client\src\Ap 13% building modules 25/27 modules 2 active ...4.0@html-entities\lib\xml-entiti 13% building modules 25/28 modules 3 active ...0@html-entities\lib\html4-entiti 13% building modules 25/29 modules 4 active ...0@html-entities\lib\html5-entiti 13% building modules 26/29 modules 3 active ...0@html-entities\lib\html5-entiti 13% building modules 27/29 modules 2 active ...0@html-entities\lib\html5-entiti 13% building modules 28/29 modules 1 active ...0@html-entities\lib\html5-entiti 13% building modules 29/30 modules 1 active ...@html-entities\lib\surrogate-pai 13% building modules 29/31 modules 2 active ...orkspace\vue\xxx-client\src\Ap 13% building modules 30/31 modules 1 active ...@html-entities\lib\surrogate-pai 13% building modules 30/32 modules 2 active ...ue-loader\lib\component-normaliz 13% building modules 30/33 modules 3 active ...orkspace\vue\xxx-client\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.13% building modules 31/33 modules 2 active ...ue-loader\lib\component-normaliz 13% building modules 31/34 modules 3 active ..._ansi-regex@2.1.1@ansi-regex\ind 13% building modules 32/34 modules 2 active ..._ansi-regex@2.1.1@ansi-regex\ind 13% building modules 33/34 modules 1 active ..._ansi-regex@2.1.1@ansi-regex\ind 14% building modules 34/35 modules 1 active ...orkspace\vue\xxx-client\src\Ap 14% building modules 35/36 modules 1 active ...orkspace\vue\xxx-client\src\Ap 14% building modules 35/37 modules 2 active ....3.4@vue-hot-reload-api\dist\ind 14% building modules 35/38 modules 3 active ...e-style-loader\lib\addStylesClie 14% building modules 36/38 modules 2 active ...e-style-loader\lib\addStylesClie 14% building modules 37/38 modules 1 active ...orkspace\vue\xxx-client\src\Ap 14% building modules 37/39 modules 2 active ...@vue-style-loader\lib\listToStyl 14% building modules 38/39 modules 1 active ...orkspace\vue\xxx-client\src\Ap 14% building modules 39/40 modules 1 active ...er@0.28.11@css-loader\lib\css-ba 95% emitting WARNING  Compiled with 1 warnings上午6:27:53✘  http://eslint.org/docs/rules/no-new                   Do not use 'new' for side effectssrc\main.js:7:1new Vue({^✘  http://eslint.org/docs/rules/no-multiple-empty-lines  Too many blank lines at the end of file. Max of 0 allowedsrc\main.js:11:1^✘ 2 problems (2 errors, 0 warnings)Errors:1  http://eslint.org/docs/rules/no-new1  http://eslint.org/docs/rules/no-multiple-empty-linesYou may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

现在虽然没有通过 eslint 检查，但是项目已经可以正常跑起来了。

如果想要解决这个问题，可以参考我的这篇博文：

Do not use ‘new‘ for side effects的五种解决方法