Unable to load web workers in Electron app with Webpack

[alanqthomas]

monaco-editor version: 0.20.0 Browser: Electron 8 (chromium) OS: MacOS 10.15.6 Repo with reproducible issue: https://github.com/alanqthomas/electron-webpack-monaco-test

I've created a basic Electron app using the boilerplate from. https://github.com/electron-react-boilerplate/electron-react-boilerplate

I also added a custom language implementation, basically just copy/pasting the relevant bits from https://github.com/amazzalel-habib/TodoLangEditor.

I get the following errors when monaco tries to load the web worker:

I've searched far and wide on github and stack overflow for solutions but I can't seem to find anything that works. I have a feeling this might have more to do with webpack/the build, but I'm not sure if that's an issue with my configuration or a limitation of monaco editor.

Please see the linked repo to reproduce the issue. It can be run with yarn install followed by yarn dev. The relevant webpack config is in configs/webpack.config.renderer.dev.babel.js.

Any pointers in the right direction would be much appreciated.

[vcgupta]

I am also facing same issue

[alanqthomas]

@vcgupta I've worked around the problem, but I'm not sure if I've exactly "fixed" it, though.

From my testing, it seems that the Webpack configs that make the difference here are target and output.libraryTarget. The web workers should be built with a target of webworker and output.libraryTarget of var (which is the default value).

Unfortunately, this conflicts with the bundling of other files (I think it might have something to do with the fact that I'm also bundling native node modules in my build). What I've done instead is used a two-step build with a separate Webpack config for the web workers with the previously mentioned config options. This outputs the bundled files into a local directory (for temporary storage, i.e. it's ignored by git). Then in my main Webpack build, I copy over those built web worker files into my main output directory using copy-webpack-plugin.

I've looked into multi-config webpack setup (where you export an array of configs), but I couldn't get it to work – probably because my main build actually requires the web worker build to be completed before it begins, and the multi-config setup runs in parallel.

This setup "works" – the app runs and web workers are functioning correctly. But the build is much slower now because I'm running two separate builds in serial. I also lose quality of life features like hot reloading. If I make any changes I make to a web worker file, I have to restart my app entirely, waiting for the build all over again. The entire build (both steps) takes ~14s, which isn't terrible, but it's not what it could be.

I hope this helps anyone with a similar issue, but I'm almost positive there's a much nicer way to achieve the same result.