在用WebStrorm2023调试前端代码时出现以下报错：
1
2
3
|
ERROR in ./node_modules/monaco-editor/esm/vs/base/browser/browser.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ..\node_modules\monaco-editor\esm\vs\base\browser\browser.js: Static class blocks are not enabled. Please add @babel/plugin-transform-class-static-block to your configuration.
|
这个错误是因为 monaco-editor 使用了静态类块（static class blocks）语法，但 Babel 配置中没有相应的插件来转换它。
接下来采取以下步骤可以解决这个bug：
1.首先需要安装 Babel 插件
在webstorm的Terminal执行以下命令：
1
|
npm install --save-dev @babel/plugin-transform-class-static-block
|
2.修改 babel.config.js
1
2
3
4
5
6
7
8
|
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
'@babel/plugin-transform-class-static-block'
]
}
|
3.修改 vue.config.js
1
2
3
4
5
6
7
8
9
10
11
|
const { defineConfig } = require("@vue/cli-service");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack(config) {
config.plugin("monaco").use(new MonacoWebpackPlugin({
languages: ['javascript', 'typescript', 'json', 'html', 'css', 'cpp', 'java', 'python']
}));
},
});
|
4.清理缓存并重启
1
2
3
4
5
|
# 删除缓存
Remove-Item -Recurse -Force node_modules\.cache -ErrorAction SilentlyContinue
# 重新运行
npm run serve
|
⚠️注意：
在WebStorm中开的Terminal是PowerShell形式的，格式跟普通的Terminal有差异。