博客

前两天从公司git 上clone了一个前端项目采用Nodejs + React 写的，想本地跑起来试试看，自己倒腾倒腾，结果在尝试的过程中遇到各种问题，真是一路上过关斩将终于跑起来了，其中有个典型的问题，因为是初次接触这个问题困扰了我几天，具体错误如下：

Module build failed (from ./node_modules/_mini-css-extract-plugin@0.7.0@mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot read property 'tapAsync' of undefined
    at ExternalModuleFactoryPlugin.apply (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@5.47.1@webpacklibExternalModuleFactoryPlugin.js:59:39)
    at D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@5.47.1@webpacklibExternalsPlugin.js:30:63
    at SyncHook.eval (eval at create (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_tapable@1.1.3@tapablelibHookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_tapable@1.1.3@tapablelibHook.js:154:20)
    at D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@4.41.1@webpacklibCompiler.js:665:23
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_tapable@1.1.3@tapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_tapable@1.1.3@tapablelibHook.js:154:20)
    at Compiler.compile (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@4.41.1@webpacklibCompiler.js:662:28)
    at Compiler.runAsChild (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@4.41.1@webpacklibCompiler.js:328:8)
    at Object.pitch (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_mini-css-extract-plugin@0.7.0@mini-css-extract-plugindistloader.js:127:17)

 @ ./node_modules/_antd@4.8.2@antd/es/breadcrumb/style/index.js 2:0-22
 @ ./src/components/common/PateoBreadcrumb/index.js
 @ ./src/components/GlobalHeader/RightContent.tsx
 @ ./src/layouts/BasicLayout.tsx
 @ ./src/layouts/index.tsx
 @ ./src/pages/.umi/router.js
 @ ./src/pages/.umi/umi.js
 @ multi ./node_modules/_af-webpack@1.14.9@af-webpack/lib/webpackHotDevClient.js ./src/pages/.umi/umi.js

 error  in ./node_modules/_antd@4.8.2@antd/es/config-provider/style/index.less

Module build failed (from ./node_modules/_mini-css-extract-plugin@0.7.0@mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot read property 'tapAsync' of undefined
    at ExternalModuleFactoryPlugin.apply (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@5.47.1@webpacklibExternalModuleFactoryPlugin.js:59:39)
    at D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@5.47.1@webpacklibExternalsPlugin.js:30:63
    at SyncHook.eval (eval at create (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_tapable@1.1.3@tapablelibHookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_tapable@1.1.3@tapablelibHook.js:154:20)
    at D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@4.41.1@webpacklibCompiler.js:665:23
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_tapable@1.1.3@tapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_tapable@1.1.3@tapablelibHook.js:154:20)
    at Compiler.compile (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@4.41.1@webpacklibCompiler.js:662:28)
    at Compiler.runAsChild (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_webpack@4.41.1@webpacklibCompiler.js:328:8)
    at Object.pitch (D:Javaworkspace-ideaoptpspcallcenterui
ode_modules_mini-css-extract-plugin@0.7.0@mini-css-extract-plugindistloader.js:127:17)17)
 @ ./node_modules/_@ant-design_pro-layout@5.0.10@@ant-design/pro-layout/es/index.js
 @ ./src/pages/system/roleEdit/index.js
 @ ./src/pages/.umi/router.js
 @ ./src/pages/.umi/umi.js
 @ multi ./node_modules/_af-webpack@1.14.9@af-webpack/lib/webpackHotDevClient.js ./src/pages/.umi/umi.js

首先看这个错误像是版本问题，根据名字全文搜索了一下“tapAsync”，结果没有任何位置引用，应该是某个包里面间接应用，

首先第一步命令清缓存：npm cache clean –force，

第二步，删除项目下的node_modules，然后在重试，问题依旧，

然后尝试换node版本，下了一个版本管理器gnvm，尝试了几个版本

仍然报同样的错误，没有办法然后请教熟悉这块的同事，换了个跟同事一样的版本，

nodejs：14.16.0 ，npm: 7.14.0 , 然后并卵仍然报同样的错误，晕倒。。。

既然跟版本问题无关，那会不会还是跟缓存有关，请教了一下同事，会不会在构建的时候还是读取缓存目录的node_modules的文件，然后拷贝到了对应的项目下，同事说不会每次构建都是从新下载的，因为不熟姑且就相信了吧，然后继续倒腾，重新构建cnpm install ，启动 cnpm start ，然后并没有解决问题呀！

既然都新安装的，索性把nodejs 的全局缓存目录整个都干掉清空，重新下载，因为我之前切换过缓存目录的，（用命令npm cache clean –force无法全部清除），如是我把如下两个全局目录整个清空了，期间报了个error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “4.0” 错误，参照：

https://blog.csdn.net/liuyong0507/article/details/88219799

信息，

执行 npm install–msvs_version 2015 解决问题，并没有重新安装

Visual C++ 2015 Build Tools

然后在删除项目下对应的node_modules，然后在重新cnpm install，中间仍然有些警告暂时忽略，然后在重试cnpm start，特么竟然启动成功了，泪奔。。。