Closed sartak closed 4 years ago
sartak
commented
4 years ago I have searched the issue tracker for a bug that matches the one I want to file, without success.
My search was too narrow. I looked more carefully and found https://github.com/electron-userland/electron-forge/issues/1591 which seems similar. Feel free to close this as a dupe if you think it's the same underlying issue.
gervais0017
commented
4 years ago @sartak and anybody else that stumble upon this issue, after 2 days of fighting against the same exact issue (ElectronForge+Webpack+MonacoEditor+monaco-editor-webpack-plugin), it seems like one extra line was all that was needed :
in webpack.rendered.config
module.exports = {
[...]
output: {
publicPath: './../',
},
[...]
}For some reason, with that config, both the dev server and the prod make are still able to find main_window/index.js, but the public path being one level higher, it's also able to find all the ##/index.js and the xxx.worker.js at the "top" level, under renderer/.
As an added tidbit, I also did the following optimization, which keeps all the ##/index.js nicely bundled in one folder. (My solution above works with and without the following optimization)
in webpack.rendered.config
module.exports = {
[...]
optimization: {
splitChunks: {
cacheGroups: {
monacoCommon: {
test: /[\\/]node_modules[\\/]monaco\-editor/,
name: 'monaco-editor-common',
chunks: 'async'
}
}
}
},
[...]
}Amazing, the publicPath: './../' trick worked perfectly for me! Thank you so much @gervais0017!!
gervais0017
commented
4 years ago @sartak Wonderful, glad the hear I was able to help ! Also I'm happy to know that the trick actually works and wasn't just a fluke on my local environment :)
malept
commented
4 years ago This sounds like a Webpack configuration problem rather than a bug in Electron Forge, so I'm closing this.
sartak
commented
4 years ago Please consider reopening this, because Electron Forge is what's generating inconsistent and incorrect Webpack configuration, as I explained here:
Note: I'm creating an issue here in electron-forge (rather than in monaco-editor or monaco-editor-webpack-plugin) because of the different results observed in
npm startvsnpm run make. The underlying error may well be in one of the other two repos (e.g. it's possible thatmonaco-editor-webpack-pluginis at fault for ignoring options that@electron-forge/plugin-webpacksets to support different entry points for different windows). That said, it felt appropriate to start here because it's ultimately differences in electron-forge's development vs deploy that is cascading into these user-visible differences, which seems to be counter to electron-forge's intent.
Now that we better understand the problem, I'd be happy to create a smaller repro case that doesn't involve Monaco.
malept
commented
4 years ago Once there's a minimal repro, I'll consider reopening this issue.
Preflight Checklist
Issue Details
Expected Behavior
Adding monaco-editor to my app created with electron-forge works fully in both development and deployment modes: code is syntax highlighted, and there are no errors in the dev console.
Actual Behavior
Adding monaco-editor to my app created with electron-forge works fully only in development mode. The app created by
electron-forge makeloads and runs, but it throws 404 errors when loading some JavaScript files, which break monaco-editor's web workers, causing the editor's syntax highlighting to fail. However the rest of the app functions for the most part: the code I added to renderer.js does run, and even monaco-editor does load and does work - just not fully, due to the missing JS files.The source of the trouble seems to be a mismatch between where monaco-editor's web-worker JS files exist on disk and what URL is used to attempt to load them. For example one desired file is at
/Users/shawn/tmp/my-proj/out/my-proj-darwin-x64/my-proj.app/Contents/Resources/app/.webpack/renderer/2/index.jsbut the browser tries to requestfile:///Users/shawn/tmp/my-proj/out/my-proj-darwin-x64/my-proj.app/Contents/Resources/app/.webpack/renderer/main_window/2/index.js, which fails. (note the absence then presence of…/main_window/…subdirectory, respectively)Note: I'm creating an issue here in electron-forge (rather than in monaco-editor or monaco-editor-webpack-plugin) because of the different results observed in
npm startvsnpm run make. The underlying error may well be in one of the other two repos (e.g. it's possible thatmonaco-editor-webpack-pluginis at fault for ignoring options that@electron-forge/plugin-webpacksets to support different entry points for different windows). That said, it felt appropriate to start here because it's ultimately differences in electron-forge's development vs deploy that is cascading into these user-visible differences, which seems to be counter to electron-forge's intent.To Reproduce
git clonehttps://github.com/sartak/electron-forge-issue-1675, which I'd created with:npx create-electron-app my-proj --template=webpack(commit 1)npm install monaco-editor-webpack-plugin monaco-editor file-loader(commit 2)cd electron-forge-issue-1675npm startnpm run makeopen out/my-proj-darwin-x64/my-proj.app/Annotated app dev console output
This first error is from trying to load
file:///Users/shawn/tmp/my-proj/out/my-proj-darwin-x64/my-proj.app/Contents/Resources/app/.webpack/renderer/main_window/2/index.jsHere's the relevant directory structure:
main_window/index.htmlis the "Welcome to your Electron application" template from the electron-forge scaffolding.main_window/index.jsis a 14-megabyte file that contains a minified version of the renderer JS (including my modifications to create and attach adivinto the DOM, then load monaco), as well as, at the very least, a lot of monaco's own source code. It (correctly) does not appear to include the main.js (which is correctly available in.../.webpack/main/index.js)The file that the system is trying to load is
.../.webpack/renderer/2/index.js(without the/main_window/subdirectory), which is the code-split module for the JavaScript syntax highlighting web worker. If I sinfully copy the file into the place that it's expected to be:Then
open out/my-proj-darwin-x64/my-proj.app/, this error goes away and syntax highlighting does work.This second error is from trying to load
file:///Users/shawn/tmp/my-proj/out/my-proj-darwin-x64/my-proj.app/Contents/Resources/app/.webpack/renderer/main_window/64/index.jsIt's equivalent to the previous error, except with
s/2/64/. It's another code-split module for a language-specific web worker.(Copying this chunk into the expected place helps monaco get further along, but then it fails in the same way looking for additional files, so I stopped here)
And then finally a few cascading errors resulting from the above two:
electron-forge makedebug logGenerated app directory layout