Initializing monaco as an npm package with Next.js

[omniphx]

Describe the bug

I'd like to initialize monaco from an npm package so I can write unit tests. Seems like this is a common problem since monaco is by default initialized remotely.

Unfortunately, it seems that inside a Next.js app I'm either implementing this incorrectly or it doesn't work:

import Editor from '@monaco-editor/react';

import loader from '@monaco-editor/loader';
import { useEffect } from 'react';
import * as monaco from 'monaco-editor';

loader.config({ monaco })

const Code = () => {
  
  useEffect(() => {
    loader.init().then((monaco) => {
      console.log("Here is the monaco instance", monaco);
    });
  })

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// let's write some broken code 😈"
    />
  )
};

export default Code;

I'm also importing this component with SSR turned off:

const Code = dynamic(() => import('../components/Code'), {
  ssr: false,
})

To Reproduce

Run this example: https://stackblitz.com/edit/nextjs-xye7xg?file=components/Code.tsx

Will see an console error :

error - ./node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.css
Global CSS cannot be imported from within node_modules.

Expected behavior

1. Should be able to load monaco from node_modules within a Next.js app
2. When loading from npm packages, should be able to run the following test: https://stackblitz.com/edit/nextjs-xye7xg?file=components/Code.test.tsx

[suren-atoyan]

hey 👋 @omniphx

This issue should be referred to the original repository - microsoft/monaco-editor. In fact, there is an open issue related to this - check this.

Be aware that if you use it as npm package you should also use monaco-editor-webpack-plugin

[KiLLg0r]

Hello 👋
I faced the same problem the other day and I found a solution if still needed.

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["monaco-editor"],
};

module.exports = nextConfig;

You must transpile the 'monaco-editor' module if you want to use it in Nextjs.
If you're using any version of Nextjs above 13 you can use the code above. If not you need to use 'next-transpile-modules' package.

[czescwojtek]

Hey @KiLLg0r! It doesn't work the way you described it. I'm dealing with Server Error ReferenceError: navigator is not defined with the exact config on [email protected]

[KiLLg0r]

Hey @czescwojtek ! I'm sorry to hear that. I didn't had this specific error.
Unfortunately, I forgot to mention, you to have downgrade the monaco-editor module, I used version @0.31.1. Some older versions work better.
This can be a cause of the error.

[czescwojtek]

oh, that's a bummer, I need the newer one. Thanks anyway! @KiLLg0r

[jeffreys-cat]

I have the same problem, the load monaco-editor from CDN is prolonged significantly in China

[jeffreys-cat]

Hey @KiLLg0r , I'm downgrading to version @0.31.1, But it doesn't work! I got ReferenceError: navigator is not defined. too

[beadex]

any updates on this? i also got ReferenceError: navigator is not defined too.

[KiLLg0r]

Hello @jeffreys-cat and @beadex. I have no update about it. The only way I managed to make it work was to downgrade @monaco-editor/react, which is not very worth and solves the problem only at the moment. If I will find a solution in which to work all l will come back with updates.

[WNemencha]

@KiLLg0r to which version did you downgrade in order to get rid of this issue? Thanks in advance :)

[technorav3nn]

I too am getting navigator is not defined