基于Create React App的Monaco Editor项目报错：找不到metadata.js模块

以下是几种针对性的解决方法：

• 版本兼容性检查
  monaco-editor-webpack-plugin与monaco-editor的版本必须严格匹配，版本不兼容是这类路径错误的常见原因。比如：

  • monaco-editor-webpack-plugin v7.x 对应 monaco-editor v0.38.x 及以上
  • monaco-editor-webpack-plugin v6.x 对应 monaco-editor v0.37.x
    执行以下命令重装匹配版本：

  # 卸载现有包
  npm uninstall monaco-editor monaco-editor-webpack-plugin
  # 安装匹配版本（以v7+v0.38为例）
  npm install monaco-editor@^0.38.0 monaco-editor-webpack-plugin@^7.0.0
  

• 修正Webpack配置（针对CRA）
  Create React App默认封装了Webpack配置，需通过react-app-rewired或craco修改配置，确保插件正确引入：

  1. 安装react-app-rewired：

     npm install react-app-rewired --save-dev
     

  2. 在项目根目录创建config-overrides.js，添加插件配置：

     const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
     
     module.exports = function override(config, env) {
       config.plugins.push(new MonacoWebpackPlugin({
         // 指定需要的语言，减少打包体积
         languages: ['javascript', 'typescript']
       }));
       return config;
     };
     

  3. 修改package.json中的启动脚本：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

• 手动指定monaco-editor路径
  如果插件无法自动识别monaco-editor的安装路径，可在插件配置中添加monacoPath选项：

  new MonacoWebpackPlugin({
    monacoPath: 'monaco-editor/esm'
  })
  

• 清理缓存
  缓存导致的文件引用异常也可能引发此问题，执行以下操作清理：

  • 删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）
  • 执行npm cache clean --force清理npm缓存
  • 重新执行npm install

• 移除ModuleScopePlugin限制
  CRA的ModuleScopePlugin会限制引入node_modules外的文件，若插件路径解析受此影响，可在config-overrides.js中移除该插件：

  const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
  const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
  
  module.exports = function override(config, env) {
    // 移除ModuleScopePlugin
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
    config.plugins.push(new MonacoWebpackPlugin());
    return config;
  };
  

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