[Bug] Package currently doesn't work when used with NextJS

[KTSnowy (KTSnowy)]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Actual Behavior

Package is currently broken when used with NextJS, there seems to be no way to fix without modifying the package's source code.

Expected Behavior

Expected to be able to use the package with NextJS, specially since there's a ReactJS sample in the samples folder

Additional Context

It seems that NextJS requires that css files be imported as ".module.css"

[Christian (chrison94)]

I think the reason might also be related to: vercel/next.js#10975

Solution:
make use of next-transpile-modules inside your next.config.js.

As an example:

const config = {
  webpack: config => {
    config.plugins.push(
      new MonacoWebpackPlugin({
        languages: ['javascript'],
        filename: 'static/[name].worker.js',
      }),
    );
    return config;
  },
[…]
}


const withTM = require('next-transpile-modules')(['monaco-editor']);

module.exports = withTM(config);

[Rikki Schulte (acao)]

The above example doesn't work when adapted to the latest next@13

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['monaco-editor'],
  webpack(config, options) {
    config.plugins.push(new MonacoWebpackPlugin({
      languages: ['json'],
      filename: 'static/[name].worker.js',
    }));
    return config;
  },
};

module.exports = nextConfig;

I get this error in the console/error boundary and next fails

setting getter-only property "Lexer"

worth noting - despite using the above config with json instead of javascript, only static/editor.worker.ts shows up. it appears this failure happens in the transpilation stage

[Rikki Schulte (acao)]

resolution here:

https://codesandbox.io/p/sandbox/monaco-graphql-nextjs-96lqjw

[vino (vinoMamba)]

Rikki Schulte (@acao) have you already solved this problem ?

[Rikki Schulte (acao)]

vino (@vinoMamba) yes, sorry here is a working version here with monaco-graphql from a few months ago. just next.js and monaco-editor and the webpack plugin!

https://codesandbox.io/p/sandbox/monaco-graphql-nextjs-96lqjw

[roger_s (rsodre)]

There's a next.js working example here:

react-monaco-editor/react-monaco-editor#271 (comment)