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

Question

我正在尝试让 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

的一些相关部门

"@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..

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

Answer 1

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

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

吸取教训，在升级之前检查兼容性！

Answer 2

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

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

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

regeneratorRuntime error using Monaco Editor with React and Webpacker

reactjs

webpack

babeljs

monaco-editor

webpacker