VueJS 3项目构建报错：Cannot read properties of undefined (reading 'e')

环境信息 #

Node: v17.9.1
npm: 8.11.0
vue@3.3.2
@vue/cli-service@5.0.8

操作步骤 #

vue create build-a-bot
cd build-a-bot
npm run build

报错信息 #

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> build-a-bot@0.1.0 build
> vue-cli-service build

All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


-  Building for production...
 ERROR  Failed to compile with 2 errors18:39:38

 error  in ./src/App.vue?vue&type=style&index=0&id=8e132f82&lang=css

Syntax Error: HookWebpackError: Cannot read properties of undefined (reading 'e')
-- inner error --
TypeError: Cannot read properties of undefined (reading 'e')
Generated code for C:\dev\build-a-bot\node_modules\css-loader\dist\cjs.js??clonedRuleSet-12.use[1]!C:\dev\build-a-bot\node_modules\vue-loader\dist\stylePostLoader.js!C:\dev\build-a-bot\node_modules\postcss-loader\dist\cjs.js??clonedRuleSet-12.use[2]!C:\dev\build-a-bot\node_modules\vue-loader\dist\index.js??ruleSet[0].use[0]!C:\dev\build-a-bot\src\App.vue?vue&type=style&index=0&id=8e132f82&lang=css
 1 | __webpack_require__.r(__webpack_exports__);
 2 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("C:\\dev\\build-a-bot\\node_modules\\css-loader\\dist\\runtime\\noSourceMaps.js");
 3 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
 4 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("C:\\dev\\build-a-bot\\node_modules\\css-loader\\dist\\runtime\\api.js");
 5 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 6 | // Imports
 7 |
 8 |
 9 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
10 | // Module
11 | ___CSS_LOADER_EXPORT___.push([module.id, "\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n", ""]);
12 | // Exports
13 | /* harmony default export */ __webpack_exports__.d.e.f.a.u.l.t = (___CSS_LOADER_EXPORT___);
14 |


 error  in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=0a39cc74&scoped=true&lang=css

Syntax Error: HookWebpackError: Cannot read properties of undefined (reading 'e')

解决方案 #

这个问题是Node 17+版本与css-loader、@vue/cli-service的兼容性冲突导致的，可通过以下两种方式解决：

方案1：降级Node到LTS版本 #

1. 使用nvm切换到Node 16.x LTS版本：

   nvm install 16.20.2
   nvm use 16.20.2
   

2. 删除项目依赖文件，重新安装：

   rm -rf node_modules package-lock.json
   npm install
   

方案2：固定css-loader兼容版本 #

1. 在项目的package.json中添加指定版本的css-loader：

   "devDependencies": {
     "css-loader": "6.7.3"
   }
   

2. 删除依赖文件并重新安装：

   rm -rf node_modules package-lock.json
   npm install
   

验证修复 #

执行以下命令确认问题解决：

• npm run serve：检查页面是否正常显示
• npm run build：确认编译无报错

注：npm run serve页面空白的问题通常由编译报错导致资源无法加载引起，解决build报错后该问题一般会同步修复。若仍空白，可查看浏览器控制台的资源加载或JS报错信息排查。

内容的提问来源于stack exchange，提问作者NoobieNoob