logo标签列表

升级 Monaco Editor 可能需要额外的加载器来处理这些加载器的结果。

webpackbabeljsmonaco-editorbabel-loaderreact-app-rewired
11

我想将 Monaco Editor 版本升级到 v0.31.1。我执行了 npm install monaco-editor@0.31.1 命令，然后使用 sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-app-rewired start 命令重新编译，但是出现了以下错误：

Failed to compile.

./node_modules/monaco-editor/esm/vs/language/html/monaco.contribution.js 154:11
Module parse failed: Unexpected token (154:11)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     dispose() {
|       onLanguageListener.dispose();
>       mode?.dispose();
|       mode = void 0;
|     }

请问有人可以帮忙吗？

编辑 1： 升级前的package.json文件：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fluentui/react": "^8.33.0",
    "@handsontable/react": "^9.0.2",
    "@material-ui/core": "^4.9.8",
    "@microsoft/office-js-helpers": "^1.0.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/react-stripe-elements": "^6.0.4",
    "@uifabric/react-cards": "^0.109.49",
    "axios": "^0.19.2",
    "color": "^3.1.2",
    "copy-to-clipboard": "^3.3.1",
    "cross-storage": "^1.0.0",
    "dva": "^2.4.1",
    "dva-model-creator": "^0.4.3",
    "formik": "^2.1.4",
    "handsontable": "^9.0.2",
    "highcharts": "^7.0.3",
    "highcharts-react-official": "^3.0.0",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "monaco-editor": "^0.20.0",
    "monaco-languageclient": "^0.13.0",
    "node-sass": "^4.14.1",
    "office-ui-fabric-core": "^11.0.0",
    "office-ui-fabric-react": "^7.105.4",
    "query-string": "^6.11.1",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-meta-tags": "^1.0.1",
    "react-monaco-editor": "^0.35.0",
    "react-scripts": "3.4.1",
    "react-stripe-elements": "^6.1.1",
    "redux-devtools-extension": "^2.13.8",
    "styled-components": "^5.0.1",
    "typescript": "^3.8.3",
    "yup": "^0.28.3"
  },
  "scripts": {
    "start": "PORT=3000 react-app-rewired start",
    "start:https": "HTTPS=true  react-app-rewired start",
    "build": "react-scripts --max_old_space_size=8096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/color": "^3.0.1",
    "@types/cross-storage": "^0.8.29",
    "@types/jest": "^25.1.4",
    "@types/lodash": "^4.14.149",
    "@types/node": "^13.9.5",
    "@types/office-js": "^1.0.92",
    "@types/query-string": "^6.3.0",
    "@types/react": "^16.9.27",
    "@types/react-dom": "^16.9.5",
    "@types/react-redux": "^7.1.7",
    "@types/styled-components": "^5.0.1",
    "@types/yup": "^0.26.33",
    "css-loader": "^3.5.3",
    "react-app-rewired": "^2.1.8",
    "style-loader": "^1.2.1"
  }
}

当使用"monaco-editor": "^0.20.0"时，运行npm list monaco-editor会返回：

$ npm list monaco-editor
npm list monaco-editor
frontend@0.1.0 /frontend
├── UNMET DEPENDENCY monaco-editor@0.20.0 
└─┬ UNMET DEPENDENCY react-monaco-editor@0.35.0
  └── UNMET DEPENDENCY monaco-editor@0.20.0 

npm ERR! missing: monaco-editor@0.20.0, required by frontend@0.1.0
npm ERR! missing: react-monaco-editor@0.35.0, required by frontend@0.1.0
npm ERR! missing: monaco-editor@0.20.0, required by react-monaco-editor@0.35.0

当使用"monaco-editor": "^0.31.1"时，运行npm list monaco-editor会返回：

$ npm list monaco-editor
frontend@0.1.0 /frontend
├── UNMET DEPENDENCY monaco-editor@0.31.1 
└─┬ UNMET DEPENDENCY react-monaco-editor@0.35.0
  └── UNMET DEPENDENCY monaco-editor@0.31.1 

npm ERR! missing: monaco-editor@0.31.1, required by frontend@0.1.0
npm ERR! missing: react-monaco-editor@0.35.0, required by frontend@0.1.0
npm ERR! missing: monaco-editor@0.31.1, required by react-monaco-editor@0.35.0

编辑2:

根据@Bart的回答，我通过yarn add @babel/preset-env --dev安装了@babel/preset-env并创建了babel.config.json，内容为{"presets": ["@babel/preset-env"]}，但是react-app-rewired start仍然报错。

然后我意识到我有一个名为config-overrides.js的文件，其内容如下：

module.exports = function override (config, env) { 
    // disable chunks so the index.html won't change during development 
    config.optimization.splitChunks = {
        cacheGroups: {
            default: false,
        },
    };
    config.optimization.runtimeChunk = false;
    return config;
}

我随后添加了 config.module.rules 的部分，但编译仍然返回相同的错误。

此外，似乎使用 yarn build 可以构建项目而没有这个错误。 但是构建项目需要时间。

module.exports = function override (config, env) {
    config.module.rules = 
        [
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ]
    
    // disable chunks so the index.html won't change during development 
    config.optimization.splitChunks = {
        cacheGroups: {
            default: false,
        },
    };
    config.optimization.runtimeChunk = false;
    return config;
}
可能也需要更新 Babel。看起来你现在使用的版本不支持 https://github.com/tc39/proposal-optional-chaining/。 - user3840170
你要从哪个版本更新？我很好奇，因为我也有类似的问题，想要找到一个可用的版本。 - Safiyya
@Safiyya 我如何在我的 Mac OS 上检查 Babel 的版本？ - SoftTimur
你可以使用 npm list monaco-editor 或者 npm list babel，哪个版本的编辑器适用于你？ - Safiyya
@Safiyya "monaco-editor": "^0.20.0" 对我有效。 - SoftTimur
@Safiyya 我已经在原帖中添加了 npm list monaco-editor 的结果。npm list babel 没有返回任何有用的信息。 - SoftTimur
4个回答
11
问题似乎出在可选链语法（?. 在 mode?.dispose(); 中）。这也被列为 Monaco 的 changelog 中的一个破坏性变更：

生成的代码现在与 ESBuild 捆绑在一起，并且生成的代码使用了更新的浏览器特性，例如可选链。这些特性应该在所有浏览器中都可用，但是旧的 JS 解析器可能无法正确解析它们，特别是 parcel v1 可能在解析 JS 时会遇到问题。

正确的 Babel 插件 可以很好地处理这种语法。总的来说，最好使用 @babel/preset-env 而不是单独的插件。这个预设可以同时处理多个插件。你是否有一个 babel 配置文件，在其中可以包含这个预设？这可以简单地通过将 @babel/preset-env 安装为开发依赖，并在项目根目录创建一个名为 babel.config.json 的文件，内容如下：
{
  "presets": ["@babel/preset-env"]
}

其次，这可能意味着您的Babel配置已经正常工作，但是Webpack（在Create React App背后使用）忽略了node_modules中的任何内容，这通常是为了加快转译时间。那么您需要找到一种方法来覆盖Webpack配置，以便您的monaco依赖不会被跳过转译。
我看到您已经在使用react-app-rewired，所以更新Webpack配置可以按照他们的文档链接进行操作。
// config-overrides.js
module.exports = function override (config, env) { 
    // disable chunks so the index.html won't change during development 
    config.optimization.splitChunks = {
        cacheGroups: {
            default: false,
        },
    };
    config.optimization.runtimeChunk = false;
    
    config.module.rules = [
      {
        test: /node_modules\/monaco-editor/,
        use: {
          loader: 'babel-loader',
          // if you include your babel config here,
          // you don’t need the `babel.config.json` file
          options: { presets: ['@babel/preset-env'] }
        }
      },
      ...config.module.rules
    ]
    return config;
}

集成Babel可以通过babel-loader来完成，详细说明请参见这里。
我不确定，我也在想。你能提出一个精确的修改建议吗？ - SoftTimur
1
谢谢您的回复...但是您能直接在我的config-overrides.js上工作吗？我对webpack和react-app-rewired的了解不足，无法将您的答案适应到我的代码中。 - SoftTimur
“build” 命令似乎可以正常工作，并且是通过 “react-scripts” 运行的。是否也可以通过 “react-scripts” 运行 “start” 命令呢？ - Bart
这有帮助解决你的问题吗？ - Bart
1
你好，谢谢你的帮助，但是我还是没能让这个答案起作用。目前，我使用了我自己回答中描述的解决方法。我不会选择你的答案，但是我会给你提供悬赏以示感谢。 - SoftTimur
显示剩余10条评论
3

我的项目也遇到了同样的问题。有一个 monaco-editor-webpack-plugin 可以处理这些加载程序的问题。但是最新版本存在一些问题。 所以我安装了 monaco-editor-webpack-plugin@6.0.0 和 monaco-editor@0.30.1。然后您只需要将该插件添加到 webpack 中即可。

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new MonacoWebpackPlugin(),
  ],
};
2

我在我的Vue项目中也遇到了和你一样的问题。

也许你可以这样解决：

从GitHub下载monaco-editor的源代码

修改文件monaco-editor/build/utils.js中的函数buildESM和函数buildOneAMD

例如：将target设置为es2015

function buildESM(options) {
    build({
        entryPoints: options.entryPoints,
        bundle: true,
        target: 'es2015',
        format: 'esm',
        define: {
            AMD: 'false'
        },
        banner: {
            js: bundledFileHeader
        },
        external: options.external,
        outbase: `src/${options.base}`,
        outdir: `out/release/${options.base}/esm/`,
        plugins: [
            alias({
                'vscode-nls': path.join(__dirname, 'fillers/vscode-nls.ts')
            })
        ]
    });
}

然后运行npm run release，等待其完成

npm run release

您需要获取文件夹monaco-editor/release，将文件夹release中的内容复制并粘贴到您在项目下创建的文件夹modules/monaco-editor中。

在您的项目中，修改package.json，将monaco-editor设置为file:modules/monaco-editor，然后运行npm install命令。

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "monaco-editor": "file:modules/monaco-editor",
  }
}


npm install

这是我解决上述问题的方法，如果有人找到更好的解决方案，请在此回复。

对不起，我的英语很差。

谢谢。我明白你自己重新编译了Monaco编辑器。 - SoftTimur
我通过安装特定版本的monaco-editor解决了这个问题。 "@monaco-editor/react": "^4.3.1" ---> "4.4.6" - Sumax
1
我们找到了两个临时解决方案：
第一个解决方案是，按照这个线程的步骤，在package.json中使用以下内容：
"browserslist":[
    ">0.2%",
    "not dead",
    "not op_mini all"
]

第二种解决方案是使用import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'而不是import * as monaco from 'monaco-editor'。这两种解决方案都可以避免可选链语法的错误。我们还没有找到处理babel、babel-loader、react-app-rewired等的直接方法。
谢谢！第二个解决方案（显式导入）有效。 - Meir
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接