Is there any guide for integrating @monaco-editor/react into NextJs?

[suren-atoyan]

Check this, but in general it should work without issues. Did you face an issue?

[joebnb]

how to add alternative things into this editor?

eg

import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController';

i want to add this .but nextjs term throw error - ./node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.css Global CSS cannot be imported from within node_modules.

[cmark]

Same error here, we are using a very basic setup and just replaced the monaco-language-client with the newer version and also upgrade to the newer monaco-editor/react and monaco-editor packages. We are using Next.js 12.3.2 here.

[yuicer]

mark

[kimgysen]

Works for me:

import {FC} from "react";
import dynamic from "next/dynamic";

interface MonacoEditorProps {
    data: JSON,
}

const MonacoEditorCmp: FC<MonacoEditorProps> = ({ data }) => {

    const DynamicMonacoEditor = dynamic(import('@monaco-editor/react'));

    return (
        <>
            <DynamicMonacoEditor
                height={'50vh'}
                theme="vs-dark"
                defaultLanguage="json"
                defaultValue={JSON.stringify(data)}
            />
        </>
    )
}

export default MonacoEditorCmp;

[kimgysen]

This also closes: https://github.com/suren-atoyan/monaco-react/issues/393 Suggestion to add this to the docs: https://nextjs.org/docs/advanced-features/dynamic-import

[suren-atoyan]

I've just closed #393