serdarciplak / BlazorMonaco

Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.
https://serdarciplak.github.io/BlazorMonaco/
MIT License
446 stars 98 forks source link

AMD Loader Incompatible with ESM loading #20

Closed owaits closed 3 years ago

owaits commented 3 years ago

I am not an expert on this but I think that the AMD loader used for loading the Monaco module is incompatible with the ESM loader used as part of a components ability to lazy load js modules. When I add the loader.js required by this project to load the monaco module then all the js inside my other components appears to stop working.

I think the fix is to change Monaco to use the ESM compiled module and ideally lazy load the js inside this component.

I am not certain though, what I know is that if I use code like:

private Task<IJSObjectReference> vjsModule => _vjsModule ??= JavaScript.InvokeAsync<IJSObjectReference>("import", "./js/vjs/vjs-module.js").AsTask();

inside my component it no longer functions when I add the loader.js script reference in my index.html.

serdarciplak commented 3 years ago

Hi @owaits

That loader.js file is part of Monaco Editor itself, not BlazorMonaco. If there's an issue with it, it will occur not only in Blazor but also in a pure html and javascript app. So, I think, creating an issue in the Monaco Editor repo (https://github.com/Microsoft/monaco-editor) would be much useful.

Talking about BlazorMonaco, the code in the README is just a recommendation. You can use your own version of Monaco Editor, or load it the way you like. All BlazorMonaco needs is being able to access Monaco Editor in the 'monaco' namespace when running the scripts in the jsInterop.js file. I've picked AMD as it's compatible with older browser versions. But there's a README about loading Monaco Editor using ESM at https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-esm.md that I think can help you better.