Error: cannot find module undefinedbuild/... after HMR

Preflight Checklist

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

Issue Details

Durig development after hot reloading the app, the following error occurs:

Uncaught Error: Cannot find module 'undefinedbuild/Release/better_sqlite3.node'
Require stack:
- electron/js2c/renderer_init
    at Module._resolveFilename (internal/modules/cjs/loader.js:887)
    at Function.o._resolveFilename (electron/js2c/renderer_init.js:33)
    at Module._load (internal/modules/cjs/loader.js:732)
    at Function.f._load (electron/js2c/asar_bundle.js:5)
    at Function.o._load (electron/js2c/renderer_init.js:33)
    at Module.require (internal/modules/cjs/loader.js:959)
    at require (internal/modules/cjs/helpers.js:88)
    at eval (database.js?4c26:9)
    at Object../node_modules/better-sqlite3/lib/database.js (index.js:66025)
    at __webpack_require__ (index.js:78100)

better_sqlite3 is a native module and is built with electron-rebuild during install with a script in package.json:

"postinstall": "electron-rebuild -f -w better-sqlite3",

For HMR I’m using react-hot-loader.

• Electron Forge Version:
  • 6.0.0-beta.59
• Electron Version:
  • 13.1.7
• Operating System:
  • Windows 10
  • Ubuntu 12.04 x64
• Last Known Working Electron Forge version::
  • 6.0.0-beta.57

Expected Behavior

The app should reload correctly.

Actual Behavior

The error appears in the console and the screen keeps blank.

To Reproduce

Additional Information

[Nestoro]

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const relocateLoader = require('@vercel/webpack-asset-relocator-loader');

module.exports = [
  new ForkTsCheckerWebpackPlugin(),
  // modification below
  {
    apply(compiler) {
      compiler.hooks.compilation.tap('webpack-asset-relocator-loader', (compilation) => {
        relocateLoader.initAssetCache(compilation, 'native_modules');
      });
    },
  },
];

with this webpack.plugins.js it works!

[florianbepunkt]

Nevermind, just missed to configure the path correctly. For anyone else

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const relocateLoader = require('@vercel/webpack-asset-relocator-loader');

module.exports = [
  new ForkTsCheckerWebpackPlugin(),
  new NodePolyfillPlugin(),
  new CircularDependencyPlugin({
    // exclude detection of files based on a RegExp
    exclude: /a\.js|node_modules/,
    // include specific files based on a RegExp
    // add errors to webpack instead of warnings
    failOnError: true,
    // allow import cycles that include an asyncronous import,
    // e.g. via import(/* webpackMode: "weak" */ './file.js')
    allowAsyncCycles: false,
    // set the current working directory for displaying module paths
    cwd: process.cwd(),
  }),
  // modification below
  {
    apply(compiler) {
      compiler.hooks.compilation.tap('webpack-asset-relocator-loader', (compilation) => {
        relocateLoader.initAssetCache(compilation, 'native_modules');
      });
    },
  },
];