ChunkLoadError: Loading chunk # failed. electron-react-boilerplate

Question

After running yarn package and opening my application, I get this error when my app tries to display a component that uses React.Lazy.

// this Is how I declare my component
const LazyAcaoPage = React.lazy(() => import(
/* webpackChunkName: "AcaoPage" */ './containers/acao/AcaoPage') );

const AcaoPage = (props: Record<string, any>) => (
  <React.Suspense fallback={<h1>Loading...</h1>}>
    <LazyAcaoPage {...props} />
  </React.Suspense>
);

// then call it
<Route path={routes.ACAO} exact component={AcaoPage} />

package.json build option

"build": {
    "productName": "MyProject",
    "appId": "org.erb.ElectronReact",
    "files": [
      "dist/",
      "node_modules/",
      "index.html",
      "main.prod.js",
      "main.prod.js.map",
      "package.json"
    ],

webpack output option

 output: {
    path: path.join(__dirname, '../../src/dist'),
    publicPath: './dist/',
    filename: 'renderer.prod.js',
  },

The chunk files get built correctly to the screen/dist folder but the production code doesn't seem to be able to locate it. I actually decompressed the app.asar inside the generated Mac app and the files are also in there.

Im on node version 14.4.0 running on Mac. Im upgrading my code from the previous version of the boilerplate template. It used to work fine.

If anyone has some guidance I would much appreciate it. Thanks

Answer 1

This happens to me too, and it happens because I Initiliazed createWindow 2times in main.js.

Another time it occurs because the vs code debugger didn't closed correctly and electron exe was still running in task manager, so just end that process and it'll work.