Cannot read property 'compilation' of undefined vue --- npm dev build 报错

最新推荐文章于 2021-08-25 10:04:27 发布
原创 最新推荐文章于 2021-08-25 10:04:27 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文解决了一个在使用webpack打包时遇到的问题：optimize-css-assets-webpack-plugin版本过高导致的'compilation'属性读取错误。通过将该插件版本从5.0降至3.2，成功解决了此问题。

 Cannot read property 'compilation' of undefined     at OptimizeCssAssetsWebpackPlugin.apply (D:\workspace-vue\edc-pf\node_modules\last-call-webpack-plugin 

 

查了一下，是"optimize-css-assets-webpack-plugin" 版本 5.0 ，太高，"webpack": "^3.6.0",

降了一下版本，到3.2 ，就可以了，

执行 npm i optimize-css-assets-webpack-plugin@3.2.0就可以改为3.2.0的版本了。

 

 

 

【React + Storybook】TypeError: Cannot read property 'compilation' of undefined
云生流长的博客
04-24 1701
背景 利用create-react-app创建React项目，并搭配使用Storybook + Ant Design（如果想了解Storybook在React中如何使用，可以点击这里），package.json主要信息如下： "dependencies": { "antd": "^3.16.3", "babel-polyfill": "^6.26.0", "mobx"...
Vue - 5 - 模块化 - commonJS、ES6-Modules、webpack、工程目录、（处理：css、less、图片、vue、搭建服务器）
LawssssCat的博客
02-29 1195
文章目录# 为什么需要模块化# 模块化？组件化？# 匿名函数的解决方案 # 为什么需要模块化 回顾下 JavaScript 原始功能 在网页开发的早期， js 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。 那个时候的代码是怎么写的呢？直接将代码写在 <script> 标签中即可 随着 ajax 异步请求的出现，慢慢形成了前后端的分离 客户端需要...
TypeError: Cannot read property 'compilation' of undefined
soldier_csdn
11-13 1322
报错： 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...
node编译错误TypeError: Cannot read property 'compilation' of undefined
u014221090的专栏
09-21 1098
问题描述 /xxxxxxx/node_modules/last-call-webpack-plugin/src/index.js:170 compiler.hooks.compilation.tap( ^ TypeError: Cannot read property 'compilation' of undefined at Optimiz...
webpack错误记录Cannot read property 'compilation' of undefined
牟童的博客
04-09 4484
TypeError: Cannot read property 'compilation' of undefined………………或者TypeError: Cannot read property 'emit' of undefined 解决办法：将插件HtmlWebpackPlugin版本降级即可，降级方法：1.package.json文件中改数字 然后终端执行npm install 2....
使用scss@import 报错 × TypeError: Cannot read properties of undefined (reading '__esModule')
08-05
如果遇到`TypeError: Cannot read property 'compilation' of undefined`，可能是由于版本冲突。 解决方法： - 降低插件版本（如引用[3]中提到的`optimize-css-assets-webpack-plugin@3.2.0`） - 或者升级到与当前...
webpack@3.12.0 安装terser-webpack-plugin@1.4.5组件，run build 报错：D: web code crm-web-idea\node modules\terser-webpack-plugin dist index.js:328 compiler.hooks.compilation.tap(plugin,compilation =>{ TypeError:Cannot read propertycompilation'of undefined at TerserPlugin.apply (D: \web codecrm-web-ideanode modules terser-webpack-plugin dist index.js:328:20)at Compiler.apply (D:\web code\crm-web-idea\node modules\tapablelibTapable.is:375:16)at webpack(D:web code crm-web-idea node modules\webpack lib\webpack.is:33:19) at D:\web codecrm-web-idea\build\build.js:23 :5 at next(D:\web code\crm-web-idea\node modules\rimraf\rimraf.js:83:7)at CB(D:\web codecrm-web-ideanode modules\rimraf\rimraf.is:119:9) at FSRegCallback.oncomplete(fs.is:180:23) npm ERR! cOde ELIFECYCLE npmERR! errno 1 ERR!crm-picc-insurance@1.0.1 build:node build/build.isnpmnpM ERR!Exit status 1 npm ERR! npmERR! Failed at the crm-picc-insurance@1.0.1 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above nPm ERR!A complete log of this run can be found in:npm ERR!C:\Users\admin\AppData\Roaming\npm-cache\logs\2025-06-19T09 27 42 578Z-debug.log
06-20
[^2]:引用[2][^4]:引用[4][^5]:引用[5]根据您提供的错误信息和引用内容，`TypeError: Cannot read property 'compilation' of undefined` 错误是由于 **terser-webpack-plugin 版本与 Webpack 3.12.0 不兼容**导致的...
vue / vue-cli升级webpack4
男孩依旧
06-27 6105
vue升级webpack4.x webpack与webpack-dev-server版本不兼容 &amp;amp;amp;amp;amp;amp;gt; smart-video-mobile@0.1.0 dev F:\project\公司\智能工厂\smart-video-mobile &amp;amp;amp;amp;amp;amp;gt; webpack-dev-server --inline --progress --config build/webpack.dev.c
const { defineConfig } = require('@vue/cli-service') const express = require('express'); const path = require('path'); const wecodePlugin = require('@wedev/wecode-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const { WECODE_ENV = 'development', } = process.env; const ISLOCALDEV = WECODE_ENV === 'development'; const resolveApp = relativePath => path.resolve(path.resolve(__dirname), relativePath); module.exports = defineConfig({ publicPath: './', outputDir: 'dist', assetsDir: 'assets', transpileDependencies: true, configureWebpack: { plugins: [ new wecodePlugin({ port: 8080, host: "localhost.huawei.com", open: false }), new CopyPlugin([ ISLOCALDEV && { from: resolveApp('node_modules/@wedev/wecode-jsapi-sdk/dist/index.js'), to: resolveApp('dist/common/js/hwh5.js') }, ISLOCALDEV && { from: resolveApp('node_modules/@wedev/wecode-jsapi-sdk/dist/hwh5.css'), to: resolveApp('dist/common/css/hwh5.css') }, ].filter(Boolean)) ] }, chainWebpack: (config) => { config.resolve.alias.set('@aurora/theme', '@aurora/theme-saas') config.resolve.alias.set('@aurora/vue3-icon', '@aurora/vue3-icon-saas') }, devServer:{ setupMiddlewares: (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined'); } const commonPath = path.join(__dirname, 'node_modules/@wecode/wlk-jsapi/lib'); devServer.app.use(express.static(path.join(commonPath))) return middlewares }, host: 'localhost.huawei.com', }, css: { loaderOptions: { postcss: { postcssOptions: { plugins: [ require('postcss-px-to-viewport')({ unitToConvert: 'px', viewportWidth: 750, unitPrecision: 5, propList: ['*'], viewportUnit: 'vw', fontViewportUnit: 'vw', selectorBlackList: [], minPixelValue: 1, mediaQuery: false, replace: true, exclude: /(\/|\\)(node_modules)(\/|\\)/ }), ] } } } } }) 上面配置怎么处理这个报错：Building for production...D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\SourceMapDevToolPlugin.js:108 sourceMap = /** @type {SourceMap} */ (asset.map(options)); ^ TypeError: asset.map is not a function at getTaskForFile (D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\SourceMapDevToolPlugin.js:108:47) at D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\SourceMapDevToolPlugin.js:296:22 at D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\Cache.js:97:5 at Hook.eval [as callAsync] (eval at create (D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at Cache.get (D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\Cache.js:79:18) at ItemCacheFacade.get (D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\CacheFacade.js:115:15) at D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\SourceMapDevToolPlugin.js:247:18 at arrayEach (D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\neo-async\async.js:2405:9) at Object.each (D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\neo-async\async.js:2846:9) at D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\SourceMapDevToolPlugin.js:229:15 at D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\Compilation.js:514:18 at Hook.eval [as callAsync] (eval at create (D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:35:1) at D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\webpack\lib\Compilation.js:528:46 at D:\project3\backup\1\1\pam-mobile-develop\pam-mobile-develop\node_modules\html-webpack-plugin\index.js:1165:7 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) Node.js v20.19.4
最新发布
09-10
引用[1]提到了一个类似错误：Module build failed (from ./node_modules/_vue-loader@12.2.2@vue-loader/index.js): TypeError: Cannot read property 'vue' of undefined 引用[2]给出了解决方案：更新vue-loader...
转载：TypeError: Cannot read property 'compilation' of undefined vue 打包运行npm run build 报错...
weixin_30266885的博客
07-17 177
转载自：https://www.jianshu.com/p/3f8f60e01797 运行npm run build打包时，报错如下： 我的package.json如下: 1 { 2 ... 3 "devDependencies": { 4 "autoprefixer": "^7.1.2", 5 "babel-cor...
filed to compile TypeError: Cannot read property 'compilation' of undefined
weixin_30314793的博客
04-08 309
在执行npm install安装node_modules之后，执行npm start。报错 filed to compile TypeError: Cannot read property 'compilation' of undefined //定位到webpack/lib/progressPlugin.js 原因： 路径没有与之前版本彻底区分开！ 转载于:https://w...
'npm run build' 打包报错 Cannot read property 'compilation' of undefined
qq_43565797的博客
07-18 492
'npm run build' 打包报错 Cannot read property 'compilation' of undefined 运行npm run build打包时,报错：Cannot read property ‘compilation’ of undefined 百度发现是版本问题,webpack是3.6.0的版本，但是optimize-css-assets-webpack-plug...
Vue项目中，解决npm run build报错 TypeError: Cannot read property 'compilation' of undefined
唐唐唐行的博客
10-28 6955
描述： npm run build 时控制台报错如下： node build/build.js building for production.../Volumes/BOOTCAMP/Vue/eciot/node_modules/last-call-webpack-plugin/src/index.js:170 compiler.hooks.compilation.tap(...
运行npm run build打包时报错TypeError: Cannot read property ‘compilation‘ of undefined
weixin_40716682的博客
11-20 258
node_modules内一些文件存在版本问题，依次运行 pm i uglifyjs-webpack-plugin@1.0.0 --save npm i optimize-css-assets-webpack-plugin@2 --save npm i cssnano --save
使用Gulp驱动webpack打包进行丑化压缩遇到（TypeError: Cannot read property 'compilation' of undefined）问题
热门推荐
u011169370的博客
10-24 1万+
今天再重新配置老项目node打包环境的时候遇到了一个问题。 在打包的时候报： TypeError: Cannot read property 'compilation' of undefined 错误。 （这里需要强调一下，安装环境的使用一定要-save-dev或者是-save，否则欲哭无泪啊） 很明显，这是node一些包的版本对应不上的问题。。。 1、首先定位到uglifyjs-web...
vue项目build打包时遇到 Cannot read property ‘compilation‘ of undefined 问题解决方法
qq_38472465的博客
08-25 615
vue项目build打包时遇到 Cannot read property 'compilation' of undefined 问题解决方法
Vue: npm run build 打包时遇到 Cannot read property 'compilation' of undefined 问题解决方法
qq_32654773的博客
06-17 1万+
在打包的时候报： TypeError: Cannot read property ‘compilation’ of undefined 错误。 （这里需要强调一下，安装环境的使用一定要-save-dev或者是-save，否则欲哭无泪啊） 很明显，这是node一些包的版本对应不上的问题。。。 1、首先定位到uglifyjs-webpack-plugin中的index.js文件中，将项目中的该包升级或...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值