Monaco not initialized

[gyopiazza]

Hello! I've just installed it in a NextJS app but the basic example fails with the following error, which can be pin-pointed to MonacoEditor.tsx#L161

I have the following dependencies and the package manager is yarn

"@codingame/monaco-editor-react": "^5.2.2",
"@codingame/monaco-editor-wrapper": "^5.3.2",
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api",
"vscode": "npm:@codingame/monaco-vscode-api",

Thank you in advance for the support :)

[CGNonofr]

You need to call initialize from @codingame/monaco-editor-wrapper

The documentation needs to be updated indeed

[gyopiazza]

Thanks @CGNonofr! I've added the initialize and set a isReady state after the promise is resolved, but then the editor renders with some weird flickering and it doesn't seem very responsive.

[CGNonofr]

I hope you understand it will be difficult to help you with so little information

[gyopiazza]

This is how I'm mounting the editor:

import Editor from '@codingame/monaco-editor-react';
import { initialize } from '@codingame/monaco-editor-wrapper';
import { useEffect, useState } from 'react';

export default function VSCode() {
  const [isReady, setIsReady] = useState(false);
  const [value, setValue] = useState('// some comment');

  useEffect(() => {
    initialize().then(() => setIsReady(true));
  }, []);

  return isReady && <Editor height='auto' programmingLanguage='javascript' value={value} onChange={setValue} />;
}

In this video (60fps) you'll notice that it slowly renders the editor, line by line, the typing is not fluid and after a while the minimap crashes. https://github.com/CodinGame/monaco-editor-react/assets/748898/dda5fd8c-cf96-4802-93b8-aa44a5c22b54

I could be doing something wrong, but it feels like it's loading more than one instance or doing some extra processing.

[CGNonofr]

Can you please provide a small reproduction working project?

[gyopiazza]

Here is a bare minimum example, you should notice some heavy flickering in the minimap/scrollbar: https://codesandbox.io/p/devbox/lrv44q

[CGNonofr]

Here's how to fix all the issues:

• The flicker is due to the editor constantly resizing. It's due to the auto height feature not being compatible with the scrollBeyondLastLine monaco feature. So either use a fixed size or disable that feature
• Vite doesn't support asset urls in dev mode, to help it, add the @codingame/esbuild-import-meta-url-plugin plugin to the optimizeDeps.esbuildOptions.plugins in your vite config
• For the vite plugin to work, you need to configure the vite plugin as ESM either by renaming it to .mts or adding "type": "module" to the package.json
• There was a bug in monaco-editor-wrapper regarding the worker loading, please update to v5.3.3
• the initialize function should only be called once, and the react Strict mode make the effects to be called twice. So instead call it outside of the component once and wait for the returned promise in the component

Here's the fixed version: https://codesandbox.io/p/devbox/monaco-editor-react-forked-6v49r7

[gyopiazza]

Thank you very much!