HMR tries to connect & React errors in production build

[nolawnchairs]

Hi,

When opening the dev console in the production build: Connecting to fusebox HMR at ws://localhost:7992

This subsequently refuses to connect, and keeps trying again ad infinitum, filling up the developer console.

I also get all the Recat errors and warnings in the console.

Within the main process (using electron-is-dev) returns the correct boolean value.

The only change I've made to thefuse.ts file are:

const isProduction = !!(process.env.NODE_ENV === 'production'); // sometimes was 'undefined'
...
const rendererBundle = fuse
    .bundle('renderer')
    .instructions('> [renderer/index.tsx] +fuse-box-css')
    .plugin(CSSPlugin())
    .plugin(CopyPlugin({ useDefault: false, files: ASSETS, dest: 'assets', resolve: 'assets/' }))
    .plugin(EnvPlugin({ NODE_ENV: isProduction ? "production" : "development" }));

I normally use Webpack, not Fuse, so I'm not as familiar with how things are done in fuse. Any ideas on why this is happening?

[skellock]

It appears as if the renderer bundle is getting written with NODE_ENV !== “production”.

If you hardcode it to be production does the hmr log spam go away?

[nolawnchairs]

Hi,

What I ended up doing was to split the fuse.ts file into separate files, similar to how I run Webpack (with a dev and production config file).

I created a fuse-prod.ts file, removing all the references to development stuff:

const outputDir = 'out';
const assets = ['*.jpg', '*.png', '*.jpeg', '*.gif', '*.svg'];

// copy the renderer's html file into the right place
Sparky.task('copy-html', () => {
  return Sparky.src('src/renderer/index.html').dest(`${outputDir}/$name`);
});

// the default task
Sparky.task('default', ['copy-html'], () => {
  // setup the producer with common settings
  const fuse = FuseBox.init({
    homeDir: 'src',
    output: `${outputDir}/$name.js`,
    target: 'electron',
    log: true,
    cache: false,
    sourceMaps: true
  });

  fuse.bundle('main').instructions('> [main/main.ts]');
  fuse.bundle('renderer')
    .instructions('> [renderer/index.tsx] +fuse-box-css')
    .plugin(CSSPlugin())
    .plugin(CopyPlugin({ useDefault: false, files: assets, dest: 'assets', resolve: 'assets/' }))
    .plugin(EnvPlugin({ NODE_ENV: "production" }));

  // when we are finished bundling...
  return fuse.run();
});

Then I compile with ts-node fuse-prod And then the actual build: electron-builder --win --ia32 --x64

This has solved the HMR connecting, but I still get the "log spam" from React errors and warnings.

[skellock]

Gotcha.

So two things... I just read that the EnvPlugin order matters. Perhaps move it up after instructions?

There is a plugin I didn’t add called Quantum. It is a production only plugin with many optimizations such as tree shaking. It was just coming out when I made this boilerplate but never had time to integrate it. If you add that, it might make the environment behave.

[nolawnchairs]

Hi,

I tried moving the EnvPlugin in different positions in the plugin chain, same result. Added Quantum, build crashed on launch. Tried numerous upgrades to fuse-box and ts-node, entered the dependency hell rabbit hole, found a config that didn't error out or crash on launch - same result.

I'm out of ideas.