React render two Editors instead of one

[Sebastian Korotkiewicz]

Console log:

Uncaught Error: Unexpected usage

loadForeignModule@http://localhost:3000/static/js/bundle.js:130741:27
./node_modules/.pnpm/monaco-editor@0.33.0/node_modules/monaco-editor/esm/vs/editor/browser/services/webWorker.js/_getForeignProxy/this._foreignProxy<@http://localhost:3000/static/js/bundle.js:79060:22

I'm installed react-monacoeditor on new CRA app with React 18.0.1 and add one editor, but react renders instead two.

The first window has class: overflow-guard
The second: monaco-editor no-user-select mac showUnused showDeprecated vs-dark

I'm tested it on Firefox, Opera and Chromium with the same results.
OS: macOS Big Sur.

How can I fix it?

[Natan Rodrigues]

I have the same problem here

[Santiago Jimenez Giraldo]

Any idea of why this might be happening, I have the same issue, react version 18.1.0

[Brian McBrayer]

This must be a React 18 issue, something to do with concurrent mode or transitions I bet.

This is hugely affecting our LOB apps. I'll report back if I find any fixes.

[Brian McBrayer]

I had to revert away from React 18, which fixed this issue for me.

[小弟调调]

Upgrade v3.5.4