Monaco editor with nextjs

Question

Getting this error when using monaco editor with next js. Have anyone resolved this?

Failed to compile
./node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.js```

Answer 1

Add this webpack config fixed it for me

const withCSS = require('@zeit/next-css');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = withCSS({
  webpack(config, options) {
    config.plugins.push(new MonacoWebpackPlugin());
    return config;
  },
  cssLoaderOptions: { url: false }
})

Answer 2

@monaco-editor/react third party helper

I'm not sure why it works, I would rather avoid third party stuff, but this is he first thing I got to work, they just package it so nicely, so here it is:

• https://www.npmjs.com/package/@monaco-editor/react
• https://github.com/suren-atoyan/monaco-react

you can get rid of MonacoWebpackPlugin when using that.

Key dependencies I tested with:

  "dependencies": {
    "@monaco-editor/react": "4.2.1",
    "next": "11.0.1",
    "monaco-editor": "0.26.1",

Then usage is as described on README. They expose a Editor component helper, but you can also get a monaco instance if you want.

Related:

• https://dev.to/swyx/how-to-add-monaco-editor-to-a-next-js-app-ha3
• https://github.com/react-monaco-editor/react-monaco-editor/issues/271
• https://github.com/resourcesco/snippets/blob/master/docs/monaco-editor-with-next.md
• https://github.com/react-monaco-editor/react-monaco-editor/issues/334
• https://github.com/ritz078/transform/issues/282

Answer 3

Here's what worked for me in 2023 using Next.js 13.4.11 and monaco editor 0.40.0.

Installation

npm install monaco-editor-webpack-plugin
npm install style-loader
npm install css-loader

next.config.js

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

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const monacoRules = [
  {
    test: /\.ttf$/,
    type: 'asset/resource'
  }
]

module.exports = {
  webpack: (
    config,
    { isServer }
  ) => {

    // Modify config and then return it
    if(!isServer) {
      console.log(config)
      config.plugins.push(new MonacoWebpackPlugin({
        languages: ["javascript", "markdown", "yaml"],
        filename: "static/[name].worker.js",
      }))
      config.module.rules.push(...monacoRules)
    }

    return config
  },
}

MyClientComponent.js

"use client"

import { useEffect, useRef, useState } from "react"
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

export default function MyEditor() {
  const [editor, setEditor] = useState(null)
  const editorRef = useRef(null)

  // Instantiate Monaco Editor
  useEffect(() => {
    const options = {
      value: "# Hello World",
      language: 'markdown'
    }
    const myEditor = monaco.editor.create(editorRef.current, options);
    setEditor(myEditor)
    return () => { editor.dispose() }
  }, [editorRef])

  return (
    <div ref={ editorRef }></div>
  )
}

Note the import statement import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'.

import * as monaco from 'monaco-editor' gave me the error

Error: Unexpected usage at EditorSimpleWorker.loadForeignModule (webpack-internal:///(app-pages-browser)/./node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js:523:31) at eval (webpack-internal:///(app-pages-browser)/./node_modules/monaco-editor/esm/vs/editor/browser/services/webWorker.js:44:30) at async eval (webpack-internal:///(app-pages-browser)/./node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js:116:16)

when using language: 'javascript'.