monaco-react
monaco-react copied to clipboard
suren-atoyan
[NextJS] Editor main css being removed on Head change
Describe the bug
It seems that when we change the favicon of a NextJS app, the editor.main.css link is removed from the <head>.
To Reproduce
Steps to reproduce the behavior:
- Go to https://codesandbox.io/s/monaco-nextjs-gcd5d?file=/pages/index.js
- Click twice on the button
- The second time the editor is rendered without styles
- If you comment the
<Head>portion of the code, everything works fine
Screenshots
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser Chrome
- Version v4.2.1
Can confirm that we're seeing the same issue - was about to open up a ticket myself when I saw this ❤️
@relferreira can you confirm something for me? I am having similar issue, not the same but I think it is cause by the same problem.
can you add this to your code:
function handleEditorWillMount(monaco) {
console.log("MOUTING");
}
function handleEditorDidMount(editor, monaco) {
console.log("MOUNTED");
}
and add this to your Editor
beforeMount={handleEditorWillMount}
onMount={handleEditorDidMount}
In your case, every time you press the button the model is created again and again. 🤔 that definitely is creating some problems. with the code I gave you, you can confirm that.
You can even have more problems if you work with multi-model like I am doing.
Hi @SpaceComet
I've updated the Codesandbox. Every time I press the button, both handlers are called.
I've updated the Codesandbox. Every time I press the button, both handlers are called.
It is supposed to be like that; every time you press you unmount/mount the entire editor.
In your case, every time you press the button the model is created again and again. 🤔 that definitely is creating some problems.
When you press the button, the editor is being mounted and it creates a new model, when you press one more time it's being unmounted and it removes the current model. Nothing special here.
@SpaceComet I don't know how creating a model can be related to this issue, but if you don't want to create-and-delete model during mounting/unmounting you can use keepCurrentModel property to use the same model across "different" editors.
Find keepCurrentModel here
If you comment the <Head> portion of the code, everything works fine
I guess this <Head /> component does some "unfair" changes in the html-head that leads to this CSS inconsistency
Thank you @suren-atoyan I "fixed" this issue adding the style manually
<link
rel="stylesheet"
type="text/css"
data-name="vs/editor/editor.main"
href="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.css"></link>
@suren-atoyan Thanks for taking the time. I am actually not sure I just thought that this problem is related to something I am experiencing. I'm making an example so I can show you. Once I have it Ill open a new issue to avoid confusion
Thanks, @relferreira @suren-atoyan ! I spent a lot of time trying to debug the visibly broken React Monaco Editor whenever React Fast Reloading / Hot Module Reloading kicked in.
Took me a while to realize the CSS file was being removed causing the minimap to be moved to the wrong position, and gutter line numbers and cursor to be missing entirely.
I created a new React component to use instead of Monaco React directly:
CodeEditor.tsx:
import Head from "next/head";
import Editor, { EditorProps } from "@monaco-editor/react";
const monacoPackage = require("monaco-editor/package.json");
export const CodeEditor: React.FC<EditorProps> = (props) => {
return (
<>
<Head>
{/* Workaround for https://github.com/suren-atoyan/monaco-react/issues/272 */}
<link
rel="stylesheet"
type="text/css"
data-name="vs/editor/editor.main"
href={`https://cdn.jsdelivr.net/npm/monaco-editor@${monacoPackage.version}/min/vs/editor/editor.main.css`}
/>
</Head>
<Editor {...props} />
</>
);
};
Then applied:
- import Editor from "@monaco-editor/react";
+ import { CodeEditor as Editor } from './CodeEditor';
// ...
<Editor ... />
Hope the above helps others, too!
Thanks again everyone!
Thank you @Glavin001 , @relferreira, and @suren-atoyan, this thread helped me a lot! :)
