TypeError: Cannot read property 'compilation' of undefined

webpack版本不匹配导致TypeError

最新推荐文章于 2022-01-07 20:26:18 发布

原创最新推荐文章于 2022-01-07 20:26:18 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

博客详细描述了在使用webpack时遇到的'TypeError: Cannot read property 'compilation' of undefined'错误。错误的根本原因是webpack版本（3.6.0）与optimize-css-assets-webpack-plugin插件版本（5.0.3）不兼容。解决此问题的方法是将optimize-css-assets-webpack-plugin降级到3.2.0版本。博主警告，如果忽视这个提示，可能会导致版本自动回滚。

报错：

soldier@soldier-RESCUER-R720-15IKBN:~/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue$ npm run build

> innovate-admin-vue@1.0.0 build /home/soldier/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue
> gulp

[20:12:04] Using gulpfile ~/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue/gulpfile.js
[20:12:04] Starting 'clean'...
[20:12:04] Finished 'clean' after 4.87 ms
[20:12:04] Starting 'default'...
[20:12:04] Starting 'build'...
[20:12:04] Finished 'default' after 8.14 ms
⠋ building for production.../home/soldier/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue/node_modules/last-call-webpack-plugin/src/index.js:170
    compiler.hooks.compilation.tap(
                   ^

TypeError: Cannot read property 'compilation' of undefined
    at OptimizeCssAssetsWebpackPlugin.apply (/home/soldier/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue/node_modules/last-call-webpack-plugin/src/index.js:170:20)
    at Compiler.apply (/home/soldier/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/home/soldier/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue/node_modules/webpack/lib/webpack.js:33:19)
    at err (/home/soldier/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue/build/build.js:19:3)
    at next (/home/soldier/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue/node_modules/rimraf/rimraf.js:74:7)
    at CB (/home/soldier/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue/node_modules/rimraf/rimraf.js:110:9)
    at /home/soldier/SOLDIER/IDE_project/webStorm_project/innovate-admin-vue/node_modules/rimraf/rimraf.js:136:14
    at FSReqWrap.oncomplete (fs.js:153:21)
[20:12:07] 'build' errored after 2.94 s
[20:12:07] Error in plugin "gulp-shell"
Message:
    Command `node build/build.js` failed with exit code 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! innovate-admin-vue@1.0.0 build: `gulp`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the innovate-admin-vue@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

原因：

版本问题,webpack是3.6.0版本，但是optimize-css-assets-webpack-plugin是5.0.3版本
在这里插入图片描述

解决办法：

把optimize-css-assets-webpack-plugin改为3.2.0

npm i optimize-css-assets-webpack-plugin@3.2.0

若提示：
在这里插入图片描述

TypeError: Cannot read property 'compilation' of undefined

原因：

解决办法：

千万不要理会，不然他们的版本又会变回去了…