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

Question

I am trying to get Monaco Editor to work in my application to allow editing of YAML. I can get it work, but the console is complaining that regeneratorRuntime is undefined, so the web workers are likely not working.

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

I'm no babel expert but I think that I have it set up correctly. Here is my .babelrc file:

    {
  "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"
    ]
  ]
}

and just a few relevant deps from 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",

I'm also using Webpacker 5.4.0.

To get the editor working I set up a custom config file:

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

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

which is merged with Webpackers webpack config in environment.js:

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

environment.config.merge(customConfig)

module.exports = environment;

Then I just import the editor as usual and it loads just fine, except for the error in the console. (I'll leave this out as I don't think it is relevant to the issue);

Does anyone have any idea about what could be happening? I have tried adding @babel/plugin-transform-regenerator to my babelrc file, but no luck. Anyway, this is included in @babel/preset-env ..

I would be grateful for any help!

Answer 1

I got it working in the end. One of the things I did not mention was my Rails version (5.1.6). I upgraded this to 5.2.x so that it is in sync with webpacker 5.4. This brought in some changes to the structure, including new babel and postcss files.

I also installed corejs and regenerator-runtime and now everything is working perfectly.

Lesson learnt, check compatibility before upgrading anything!

Answer 2

I have found a solution: add targets: {esmodules: true} to @babel/preset-env . For example:

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