Open igaimerca opened 2 years ago
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.
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.
mark
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;
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
I've just closed #393
Check this, but in general it should work without issues. Did you face an issue?