Can't import the named export from non ECMAScript module

If you configured your own engine build, you may run into this issue.

The root cause is that the code-editor plugin depends on Babel at runtime for JSX compilation. From Babel 7.17.0 onward, it depends on @ampproject/remapping@2.1.0, which is written as ESM. If your bundler cannot handle ESM correctly, this error may occur.

Solution 1: Pin Babel versions

If you use yarn, add to package.json:

"resolutions": {
    "@babel/core": "~7.16.7",
    "@babel/parser": "~7.16.7",
    "@babel/preset-env": "~7.16.7",
    "@babel/preset-react": "~7.16.7",
    "@babel/standalone": "~7.16.7",
    "@babel/traverse": "~7.16.7",
    "@babel/types": "~7.16.7"
}

Solution 2: Bundler configuration. This example uses build-scripts; apply a similar approach in webpack:

module.exports = ({ onGetWebpackConfig }) => {
  // see: https://github.com/ice-lab/build-scripts#plugin-development
  onGetWebpackConfig((config) => {
    config.module // fixes https://github.com/graphql/graphql-js/issues/1272
      .rule('mjs$')
      .test(/\.mjs$/)
      .include.add(/node_modules/)
      .end()
      .type('javascript/auto');
    return config;
  });
};