DEV Community

Discussion on: How To Add Monaco Editor to a Next.js app

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) || []
  }
];