今天爱分享给大家带来Module build failed:TypeError:loadContext.getResolve is nota 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:276 const fileResolve = loaderContext.getResolve({ ^ TypeError: loaderContext.getResolve is not a function at 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:3 at 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:4 at D:\work\201222\workspace\vue\xxx-client\node_modules\_enhanced-resolve@3.4.1@enhanced-resolve\lib\CachedInputFileSystem.js:70:14 at 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.js 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_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 dev 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_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.js 10% 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 effects src\main.js:7:1 new Vue({ ^ ✘ http://eslint.org/docs/rules/no-multiple-empty-lines Too many blank lines at the end of file. Max of 0 allowed src\main.js:11:1 ^ ✘ 2 problems (2 errors, 0 warnings) Errors: 1 http://eslint.org/docs/rules/no-new 1 http://eslint.org/docs/rules/no-multiple-empty-lines You 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 检查,但是项目已经可以正常跑起来了。