英文:
VueJS 3 - Hello World: Cannot read properties of undefined (reading 'e')
问题
我正在尝试设置我的第一个Vue项目，但没有成功。如果我运行 "npm run serve"，我会得到一个空白页面。如果我运行 "npm run build"，我会得到以下错误。
已安装以下版本：
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警告：全局配置"--global"、"--local"已弃用。请改用"--location=global"。
build-a-bot@0.1.0 build
vue-cli-service build
browserslist配置中的所有浏览器目标都支持ES模块。因此，我们不会为差异加载构建两个单独的包。
- 正在为生产环境构建...
错误 编译失败，有2个错误18:39:38
错误 ./src/App.vue?vue&type=style&index=0&id=8e132f82&lang=css
语法错误：HookWebpackError: 无法读取未定义的属性（读取 'e'）
-- 内部错误 --
TypeError: 无法读取未定义的属性（读取 'e'）
生成的代码为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, "#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);
错误 ./src/components/HelloWorld.vue?vue&type=style&index=0&id=0a39cc74&scoped=true&lang=css
语法错误：HookWebpackError: 无法读取未定义的属性（读取 'e'）
英文:
I am trying to setup my first vue project without success. If I run "npm run serve", I get a blank page. If I run "npm run build", I get the errors below.
The following versions are installed:
Node: v17.9.1
npm: 8.11.0
vue@3.3.2
@vue/cli-service@5.0.8
The commands I run:
vue create build-a-bot
cd build-a-bot
npm run build
The error:
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')
答案1
得分: 4
Current workaround is to downgrade webpack from 5.83.0 to 5.82.0:
npm i webpack@5.82.0
英文:
Current workaround is to downgrade webpack from 5.83.0 to 5.82.0:
npm i webpack@5.82.0
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论