使用带有 React 和 Webpacker 的 Monaco Editor 的 regeneratorRuntime 错误

如何解决使用带有 React 和 Webpacker 的 Monaco Editor 的 regeneratorRuntime 错误

我正在尝试让 Monaco Editor 在我的应用程序中工作以允许编辑 YAML。 我可以让它工作，但控制台抱怨 regeneratorRuntime 未定义，因此网络工作者可能无法工作。

iterator.js:18 Uncaught ReferenceError: regeneratorRuntime is not defined
at iterator.js:18
at Module../node_modules/monaco-editor/esm/vs/base/common/iterator.js (iterator.js:524)
at __webpack_require__ (bootstrap:19)
at Module../node_modules/monaco-editor/esm/vs/base/common/lifecycle.js (lifecycle.js:1)
at __webpack_require__ (bootstrap:19)
at Module../node_modules/monaco-editor/esm/vs/base/common/worker/simpleWorker.js (simpleWorker.js:1)
at __webpack_require__ (bootstrap:19)
at Module../node_modules/monaco-editor/esm/vs/editor/editor.worker.js (editor.worker.js:1)
at __webpack_require__ (bootstrap:19)
at bootstrap:83

我不是 babel 专家，但我认为我已经正确设置了它。这是我的 .babelrc 文件：

    {
  "presets": [
    [
      "@babel/preset-env",{
        "useBuiltIns": "entry"
      }
    ],"@babel/preset-react"
  ],"plugins": [
    "@babel/syntax-dynamic-import","@babel/plugin-proposal-class-properties","babel-plugin-styled-components",[
      "@babel/plugin-transform-runtime"
    ]
  ]
}

以及 package.json 中的一些相关 deps

"@babel/core": "^7.14.3","@babel/plugin-transform-runtime": "^7.14.3","@babel/preset-env": "^7.14.4","@babel/preset-react": "^7.13.13","@babel/runtime": "^7.14.0","babel-loader": "^8.2.2",

我也在使用 Webpacker 5.4.0。

为了让编辑器工作，我设置了一个自定义配置文件：

// custom.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      languages: ["yaml"],publicPath: "/packs/"
    }),],};

与 environment.js 中的 Webpackers webpack 配置合并：

// environment.js
const { environment } = require('@rails/webpacker');
const customConfig = require('./custom');

environment.config.merge(customConfig)

module.exports = environment;

然后我像往常一样导入编辑器，它加载得很好，除了控制台中的错误。 （我会忽略这一点，因为我认为它与问题无关）；

有人知道会发生什么吗？我曾尝试将 @babel/plugin-transform-regenerator 添加到我的 babelrc 文件中，但没有成功。无论如何，这包含在@babel/preset-env..

如有任何帮助，我将不胜感激！

解决方法

我最后让它工作了。我没有提到的一件事是我的 Rails 版本 (5.1.6)。我将其升级到 5.2.x，以便与 webpacker 5.4 同步。这给结构带来了一些变化，包括新的 babel 和 postcss 文件。

我还安装了 corejs 和 regenerator-runtime，现在一切正常。

经验教训，在升级任何东西之前检查兼容性！

,

我找到了解决方案：将 targets: {esmodules: true} 添加到 @babel/preset-env。例如：

    {
      "presets": [
        [
          "@babel/preset-env",{
            "useBuiltIns": "entry",targets: {
              esmodules: true,},}
        ],}