Monaco-editor: Size too big: Duplicate typescriptServices in ESM webpacked version

[neoncom]

monaco-editor version: 0.11.1
Browser: -
OS: win 10 64bit
Steps or JS usage snippet reproducing the issue:

I successfully managed to use monaco editor with webpack (the full version). Everything works perfectly!

However I see in a bundle analyser that typescriptServices, which is 5+ mb big, exists 2 times in my app now (and some other modules)!

I can successfully split the code via webpack but now the ts worker does not work (console error that window is no defined). Then I do

window = self;

in the processed worker files, but the workers still do not work (console errors are gone but monaco does not show errors in editor any more).

So I either have to live with duplicate modules or I can't use the ESM version :(

Has someone found a solution to this problem? Can someone post a guide on what to do in this case?

I am using webpack 4.1.1 and doing code splitting the official webpack 4 way, described here: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

[neoncom]

See

https://github.com/webpack/webpack/issues/6525

https://stackoverflow.com/questions/49354186/webpack-common-chunks-for-code-shared-between-webworker-and-web-code

[neoncom]

In case anyone is wondering.

It still does not work. It should have worked with the solution provided in the stackoverflow answer (posted above).

Somehow the stackoverflow solution results in monaco not showing any error underlines in TS files.. (no errors in browser console).

The ts worker file seems to be split in such a way that it just doesn't do its work. But chromes shows the worker is running...

Hard to tell if it's webpacks fault or monacos fault.

Unfortunately I don't have the time to currently debug it. Would take days or maybe weeks because
1) huge code base
2) no understanding of code base
3) i'd likely just be so frustrated not getting anywhere anyway

So I hope someone that is not me, will figure it out :)

In the meantime 1 will serve 2x typescriptServices, which is very bad, but not fatal atm. (it's not just typescriptServices which is a dupe, but this is by far the biggest)

My webpack config is in the stackoverflow post! So if anyone want's to give it a try..

[neoncom]

Update:

https://github.com/webpack/webpack/issues/6859

(i have set up a sample repo with my problem)

[neoncom]

Just to clarify.
Executed "browser-esm-webpack" sample as-is. (only addition: https://github.com/webpack-contrib/webpack-bundle-analyzer ).

Yes it's a major problem.

[timkendrick]

Looks like typescriptServices.js is referenced via two separate paths (one main-thread, one worker):

Main:

editor.main.js > language/typescript/monaco.contribution > tsMode.js > languageFetatures.js > typescriptServices.js

Worker:

language/typescript/ts.worker > tsWorker.js > typescriptServices.js

…I'm not sure how clever webpack is when it comes to sharing chunks between main thread and web worker entry points, so in this case you're always going to end up with duplication.

I suspect chunk-sharing between worker and main scripts might become possible if this issue is resolved.

[neoncom]

@timkendrick in any case, i'm probably going back to the amd version because of this, until this is resolved.

Sometimes things just rob you of too much energy and I can't allow that :)

However, I am confident that this issue will get resolved some day just because nobody can argue against a drastically reduced sized production build with a straight face :)

[alexdima]

This has been addressed in the meantime by switching to using Monarch for TS tokenization, so the typescriptServices.js ends up being loaded only in the TS web worker.