`monaco-editor/esm/vs/editor/editor.api` is transformed into `cjs` instead of `esm` any more

[JounQin]

With regards to the common js usage warnings, it seems that MonacoEditorWebpackPlugin is augmenting the source of Monaco Editor and adding CJS modules.

monaco-editor/webpack-plugin/src/loaders/include.ts

Lines 29 to 36 in a5298e1

	return [
	...(globals
	? Object.keys(globals).map((key) => `self[${JSON.stringify(key)}] = ${globals[key]};`)
	: []),
	...pre.map((include: any) => `require(${stringifyRequest(include)});`),
	`module.exports = require(${stringifyRequest(`!!${remainingRequest}`)});`,
	...post.map((include: any) => `require(${stringifyRequest(include)});`)
	].join('\n');

[alexdima]

@JounQin I'm sorry, I don't understand, what do you mean?

[JounQin]

@alexdima This plugin transforms original monaco-editor ESM into commonjs format related to the mentioned source code.

[alexdima]

@JounQin I know what ESM is, I know what commonjs is, but I still don't understand what your issue is. Can you please provide clear steps, and then explain what is happening compared to what you would expect to happen?

[JounQin]

@alexdima Angular reports warning about cjs usage because the source code of this plugin is using require inside.

https://github.com/microsoft/monaco-editor-webpack-plugin/blob/master/src/loaders/include.ts#L18

I'd expect providing an option to use import instead there, or we can just use import by default because webpack understand import natively.

[alexdima]

Ok. I understand now. I don't believe that is a safe change. Here is what I have tried:

After applying that change, compiling and running npm run test, an endless stream of warnings appears:

WARNING in ../node_modules/monaco-editor/esm/vs/language/typescript/workerManager.js 94:27-49
export 'editor' (imported as 'editor') was not found in './fillers/monaco-editor-core.js' (possible exports: )
 @ ../node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js 6:0-51 34:21-34
 @ ../node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js 217:11-32
 @ include-loader!../node_modules/monaco-editor/esm/vs/editor/editor.api.js 147:0-56
 @ ./index.js 2:0-65 4:0-20

WARNING in ../node_modules/monaco-editor/esm/vs/language/typescript/workerManager.js 110:65-111:38
export 'editor' (imported as 'editor') was not found in './fillers/monaco-editor-core.js' (possible exports: )
 @ ../node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js 6:0-51 34:21-34
 @ ../node_modules/monaco-editor/esm/vs/language/typescript/monaco.contribution.js 217:11-32
 @ include-loader!../node_modules/monaco-editor/esm/vs/editor/editor.api.js 147:0-56
 @ ./index.js 2:0-65 4:0-20

WARNING in ./index.js 4:0-20
export 'editor' (imported as 'monaco') was not found in 'monaco-editor/esm/vs/editor/editor.api' (possible exports: )

The monaco-editor-webpack-plugin was initially a community contribution and I am trying to maintain it, so I don't really know what the rules of that specific loader are, but it looks like webpack does not like it when using import "..." statements instead of require("...") statements.

[titouanmathis]

I tested a fix on a fork which seems to work : titouanmathis@424abe7

Tests are ok when I run them, maybe someone else could confirm?