re: How To Add Monaco Editor to a Next.js app VIEW POST


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.


Big thanks!


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 = [
    // 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) || []
code of conduct - report abuse