search

uiwjs / react-monacoeditor

Monaco Editor component for React.
https://uiwjs.github.io/react-monacoeditor/
MIT License
296 stars 26 forks source link

React render two Editors instead of one #153

Closed skorotkiewicz closed 2 years ago

skorotkiewicz commented 2 years ago

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.

Screenshot 2022-05-02 at 20 31 49

How can I fix it?

natanrce commented 2 years ago

I have the same problem here

sago2k8 commented 2 years ago

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

BrianMcBrayer commented 2 years ago

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.

BrianMcBrayer commented 2 years ago

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

jaywcjlove commented 2 years ago

Upgrade v3.5.4