DEV Community

How To Add Monaco Editor to a Next.js app

swyx on March 30, 2020

Bottom Line Up Front I use a slightly modified version of the steps mentioned in this GitHub comment. Modifications were necessary becau...
Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

This is pretty fucking amazing. I've been meaning to work on something like this since all the syntax highlighting choices available are nowhere near as good as the Monaco editor. And I built the Shades of Purple theme because I like the right set of colors for the syntax — this will be a huge help for the new version of my site.

Thank you! 👌

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

Note that Monaco is not mobile supported. That turns me off, and had to fall back to CodeMirror...

Collapse
 
swyx profile image
swyx

doesnt monaco use codemirror under the hood?

Thread Thread
 
patarapolw profile image
Pacharapol Withayasakpunt

I don't know. I just believe what it says in the website -- microsoft.github.io/monaco-editor/

Thread Thread
 
swyx profile image
swyx

ah. i've tried it briefly on mobile web sites. it can work. but maybe not as well as you might want.

Collapse
 
jaakkolantero profile image
Tero Jaakkola

This is fantastic. Took me 15 minutes to add to my own starter and get it running. Running pretty smoothly on localhost. Hosting to now breaks it a little bit.

github.com/jaakkolantero/monaco-st...

Big thanks!

Collapse
 
swyx profile image
swyx • Edited

thanks! looks like the production build is missing this file github.com/microsoft/vscode/blob/a...

I figured it out! postcss is clearing monaco's overflow guard styling since it thinks it is unused.

// postcss.config.js
const purgecss = [
  "@fullhuman/postcss-purgecss",
  {
    // https://purgecss.com/configuration.html#options
    content: ["./components/**/*.tsx", "./pages/**/*.tsx"],
    css: [],
    whitelistPatternsChildren: [/monaco-editor/], // so it handles .monaco-editor .foo .bar
    defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
  }
];
Collapse
 
chaitanya71998 profile image
CHAITANYA

@swyx Greetings,
have you integrated monaco-languageclient i was getting this error
Image description

Can you share what steps to resolve this issue?

Collapse
 
chaitanya71998 profile image
CHAITANYA • Edited

I resolved this error and then i am getting these errors. I mentioned the error and reference code in this github issue github.com/TypeFox/monaco-language... @swyx can you check what i was missing here?

Collapse
 
debanjant profile image
Debanjan Tewary • Edited

Can someone please help me , I have tried this everything is working file but when i am doing npm run buld its showing webpack error.
Please Some one help me I want to upload it to digital ocean. I cant beacuse its not building .❤️
Error Image:
dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
timsuchanek profile image
Tim Suchanek

Thanks for the awesome article!
With Next 9.3 this works perfect.
However, with Next 9.5 this stopped working.
Anyone an idea why that could be?

Collapse
 
swyx profile image
swyx

no idea. project not active already. what errors do you get?

Collapse
 
timsuchanek profile image
Tim Suchanek

It turns out, the solution can be much simpler :D
This also works fine with the latest Next.js

github.com/vercel/next.js/tree/can...

Collapse
 
christopherhbutler profile image
Christopher Harold Butler

Do you know how to get JSX syntax highlighting working with react-monaco-editor and react? This has me stumped 🧐

Collapse
 
swyx profile image
swyx

i dont think i did anything special here. sorry.

Collapse
 
beingbook profile image
Han BaHwan

looks not work in Next.js 10...

Collapse
 
cashewnuts profile image
Tatsuya Kanemoto

I had the same problem...
I ended up just using @monaco-editor/react.

This works great without any hacky approach.