ERROR in ./node_modules/monaco-editor/esm/vs/base/browser/browser.js Module build failed解决办法。

在用WebStrorm2023调试前端代码时出现以下报错：

ERRORin./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. Pleaseadd@babel/plugin-transform-class-static-block to your configuration.

这个错误是因为 monaco-editor 使用了静态类块（static class blocks）语法，但 Babel 配置中没有相应的插件来转换它。

接下来采取以下步骤可以解决这个bug：

1.首先需要安装 Babel 插件

在webstorm的Terminal执行以下命令：

npminstall--save-dev @babel/plugin-transform-class-static-block

2.修改 babel.config.js

module.exports={presets:['@vue/cli-plugin-babel/preset'],plugins:['@babel/plugin-transform-class-static-block']}

3.修改 vue.config.js

const{defineConfig}=require("@vue/cli-service");constMonacoWebpackPlugin=require("monaco-editor-webpack-plugin");module.exports=defineConfig({transpileDependencies:true,chainWebpack(config){config.plugin("monaco").use(newMonacoWebpackPlugin({languages:['javascript','typescript','json','html','css','cpp','java','python']}));},});

4.清理缓存并重启

# 删除缓存Remove-Item -Recurse -Force node_modules\.cache -ErrorAction SilentlyContinue# 重新运行npmrun serve

⚠️注意：
在WebStorm中开的Terminal是PowerShell形式的，格式跟普通的Terminal有差异。