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