Electron-forge: Webpack code-splitting produce wrong chunks paths

[alxmiron]

Preflight Checklist

• [x ] I have read the contribution documentation for this project.
• [ x] I agree to follow the code of conduct that this project follows, as appropriate.
• [x ] I have searched the issue tracker for a bug that matches the one I want to file, without success.

Issue Details

• Electron Forge Version:
  
  
  
  • 6.0.0-beta.50
  
  
• Electron Version:
  
  
  
  • 8.2.1
  
  
• Operating System:
  
  
  
  • macOS 10.15.4
  
  

Expected Behavior

Webpack code chunks are resolved and loaded successfully in production mode

Actual Behavior

Webpack code chunks cannot be resolved and loaded in production mode (but in dev it works)

To Reproduce

• use react lazy-loading in your app (for example, make some /page route lazy-loading)
• use webpack config without optimisation preferences
• run electron-forge package
• check out/name.app/Resources/app/.webpack/renderer folder.
• See main_window/index.jsthere - it's an entry point of the app
• See 1/index.js there - as I understand, it's a chunk of our splitted route
• Run built app
• Go to /page route
• Observe 404 error in console - it tries to load renderer/main_window/1/index.js instead of renderer/1/index.js

[mierak]

Any update on this? I have the same issue.

Trying to use worker-plugin and have the same issue. Forge tries to load my worker from main_window/0/index.worker.js instead of 0/index.worker.js.

[sebastianwd]

I'm experiencing the same problem.
I'm using React.lazy to import my views. I have a simple boilerplate to reproduce the issue.

https://github.com/sebastianwd/kodoku

[sebastianwd]

I think I managed to make it work. I added this to my webpack.renderer.config.js

output: { chunkFilename: 'main_window/[name].chunk.js', publicPath: '../', },

So what this does is create the files in the main_window directory entry, this alone would make webpack search for the file main_window/main_window/0.chunk.js and return 404. So I added the publicPathproperty to search outside that directory and make the paths coincide.

[mierak]

@sebastianwd Your solution works! Thanks.

So to get worker-plugin with electron-forge to work, you use the plugin normally and specify a name for the worker like this:
const worker = new Worker('./worker', { name: 'myWorkerName', type: 'module' });

and in your webpack.renderer.config.js you put the line from @sebastianwd solution.

It then produces myWorkerName.worker.js in your main_window directory which gets loaded normally.

[Petrik626]

Hello @malept. I faced with the same issues, but fix above not working for me, I am still getting chunk loading error, for fix issue I changed public path to .webpack/renderer and after that forge make script is working fine, but after running electron start script I am getting the “Not allow load local resource” error, window cannot load ./webpack/renderer/main_window/index.js file. Could you please helm me understand how fix this issues?
I have one more question. Is possible to change folders where bundle stored? For example I want that all files were stored in build or dist folder

[linonetwo]

This should be reopened, this will cause static file search to fail. Because relative paths static file like ../images/xxx.png will fail.

[ianpogi5]

@sebastianwd Thank you very much!