Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[NextJS] Editor main css being removed on Head change

See original GitHub issue

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:

  1. Go to https://codesandbox.io/s/monaco-nextjs-gcd5d?file=/pages/index.js
  2. Click twice on the button
  3. The second time the editor is rendered without styles
  4. If you comment the <Head> portion of the code, everything works fine

Screenshots

image

image

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser Chrome
  • Version v4.2.1

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:14
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

14reactions
relferreiracommented, Aug 5, 2021

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/monaco-editor@0.25.2/min/vs/editor/editor.main.css"></link>
8reactions
Glavin001commented, Oct 29, 2021

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

next/head removing injected scripts · Issue #11012 - GitHub
next/head is removing scripts added into head. This issue is currently causing the removal of scripts injected by our third-party tag manager.
Read more >
next/head | Next.js
The contents of head get cleared upon unmounting the component, so make sure each page completely defines what it needs in head ,...
Read more >
Advanced Features: Next.js Compiler
Learn about the Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.
Read more >
Advanced Features: Custom `Document` - Next.js
Inside app/ , you can modify the initial html and body tags using a root layout. ... import { Html, Head, Main, NextScript...
Read more >
Basic Features: Handling Scripts - Next.js
There are a number of trade-offs that need to be considered when loading a third-party script in a web worker. Please see Partytown's...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

When loading the component on a SharePoint 2019 on premises, it is stuck on "loading..."

Next page

Uncaught TypeError: Cannot read property 'config' of undefined