Suddenly getting this error on compilation. Can't import the named export 'memo' from non EcmaScript module (only default export is available)

[vivekthapliyal4]

./node_modules/@monaco-editor/react/dist/index.mjs
Can't import the named export 'memo' from non EcmaScript module (only default export is available)

version: 4.4.6

[suren-atoyan]

@vivekthapliyal4 could you please try the latest version? (v4.5.0)

[vivekthapliyal4]

@suren-atoyan did that too still getting the same error

[coding-ax]

I meet the problem too, lock the version from "^4.4.6" to "4.4.6", install it again, this problem solved.

[hemreari]

@coding-ax dude you saved the day, thx a lot.

[vivekthapliyal4]

@coding-ax @suren-atoyan still facing the same error
react version : '17.0.1'
node version: '14.16.0'

[suren-atoyan]

@vivekthapliyal4 @hemreari @coding-ax could you please tell me more about your setup (CRA, Vite, Snowpack, etc), @monaco-editor/react version, react/react-dom version?

[vivekthapliyal4]

@suren-atoyan fixed now by changing package.json from "^4.4.6" to "4.4.6", do you know what could have caused it because it was working fine before?

[suren-atoyan]

We have a new version (v4.5.0). Having ^4.4.6 in your package.json lets you update to v4.5.0. The issue is obviously related to the new version - although don't know yet what exactly is wrong.

Having more information about your setup might help.

[hemreari]

@vivekthapliyal4 @hemreari @coding-ax could you please tell me more about your setup (CRA, Vite, Snowpack, etc), @monaco-editor/react version, react/react-dom version?

node version 16.15.1
react version 17.0.2
react-dom version 17.0.1
we are using CRA.

[TBRSTM]

I have same issue with @monaco-editor/react 4.5.0

node version 16.18.1
react version 17.0.1
react-dom version 17.0.1
I'm using CRA.

[suren-atoyan]

I've just tried to reproduce this issue, but it was working okay. @TBRSTM @hemreari Which react-scripts version do you use in your project?

[CWolfs]

I saw this issue today too.

node v14.21.3
npm v6.14.18
react v16.14.0
react-dom v16.14.0
react-scripts v4.0.3

Downgrading to @monaco-editor/react v4.4.6 worked as a workaround but obviously using the newer version would be nice too.

[suren-atoyan]

@CWolfs is it possible to update react-scripts to the latest version (v5)?

[mnickolay]

@suren-atoyan upgrading from 4.4.6 to 4.5.0 broke our applications when we re-fetch packages with ^4.4.6 (pulling in 4.5.0).
Originally my error was an issue with babel-loader not being able to handle optional chaining:

./node_modules/@monaco-editor/react/dist/index.mjs 124:62
Module parse failed: Unexpected token (124:62)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   D(() => {
|     let i = Pe.init();
>     return i.then(y => (s.current = y) && c(!1)).catch(y => y?.type !== "cancelation" && console.error("Monaco initialization: error:", y)), () => m.current ? w() : i.cancel();
|   }), p(() => {
|     let i = m.current.getModifiedEditor();

I have to upgrade some of my packages that are independent of this package to appropriately handle the new changes.
Instead, I'm going to just add the following to my package.json and not deal deal with ^4.5.0

{
    "resolutions": "@monaco-editor/react": "4.4.6"
}

4.5.0 should have been a major update to 5.0.0 so that it wouldn't be pulled into applications.

[suren-atoyan]

@mnickolay do you use CRA? if so whish version? could you please tell me more about your setup?

[mnickolay]

@suren-atoyan Yes, our apps use CRA. For now, our legacy apps (.NET backend, React frontend) are built with CRA 4/Typescript. We have newer apps that are built off of CRA 5/Typescript and have a GraphQL backend. These newer apps do work with @monaco-editor/react@4.5.0. It seems the incompatibility comes from CRA 4, and more specifically, I believe, from acorn.

CRA (react-scripts) imports webpack as a dependency (which we use)

react-scripts@^4.0.0 has webpack@4.44.2
react-scripts@^5.0.0 has webpack@^5.64.4

webpack@4.44.2 has acorn@^6.4.1
webpack@^5.64.4 has acorn@^8.7.1

I've forced the optional chaining error I specified above to go away by resolving acorn to ^8.0.0, but causes issues elsewhere.

[TBRSTM]

I've just tried to reproduce this issue, but it was working okay. @TBRSTM @hemreari Which react-scripts version do you use in your project?

react-scripts 4.0.3

[suren-atoyan]

I see, according to all the reports above I reckon v4.5.0 isn't compatible with CRA v4. I'll try to reproduce this issue with CRA v4 to confirm/reject this hypothesis and we will do something based on that.

[hvaleanu]

hello
I am reproducing this when trying to load monaco via npm using the loader. Without using the loader, everything works fine, but the version loaded via CDN does not have the "hideUnchangedRegions" issue fixed...

import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';

loader.config({ monaco });

// ...

IN THE BROWSER:

WARNING in ./node_modules/monaco-editor/esm/vs/editor/browser/viewParts/minimap/minimap.js 62:39-58
Can't import the named export 'DEFAULT_FONT_FAMILY' (imported as 'DEFAULT_FONT_FAMILY') from default-exporting module (only default export is available)

We don't have CRA, we use webpack

@monaco-editor/react v4.6.0
monaco-editor v0.49.0
node v20.11.0
npm v10.2.4
"webpack": "^5.90.3",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.2"

[hvaleanu]

also tried installing 4.4.6 but it still doesn't work

[mostafa6765]

fix for craco

yarn add craco-babel-loader --dev
yarn add @babel/plugin-proposal-optional-chaining --dev

craco.config.js

const CracoBabelLoader = require('craco-babel-loader');

module.exports = {
  plugins: [
    {
      plugin: CracoBabelLoader,
      options: {
        includes: [/node_modules\/monaco-editor/], // add any other paths that need to be included
        babelOptions: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-optional-chaining'],
        },
      },
    },
  ],
};

import

import MonacoEditor from '@monaco-editor/react';

@hvaleanu ,

[hvaleanu]

thank you, we have abandoned using monaco due to the security issues regarding CSP
ref: microsoft/monaco-editor#271