When using the webpack plugin, unable to find native modules

[nornagon]

• 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 an issue that matches the one I want to file, without success.

Please describe your issue:

Repro here: https://github.com/nornagon/electron-forge-native-module-repro

When using @electron-forge/plugin-webpack and importing serialport, an error is thrown when the serialport module tries to load its native module:

Error: Could not locate the bindings file. Tried:
 → /Users/nornagon/Source/plotter/saxi/build/bindings.node
 → /Users/nornagon/Source/plotter/saxi/build/Debug/bindings.node
 → /Users/nornagon/Source/plotter/saxi/build/Release/bindings.node
 → /Users/nornagon/Source/plotter/saxi/out/Debug/bindings.node
 → /Users/nornagon/Source/plotter/saxi/Debug/bindings.node
 → /Users/nornagon/Source/plotter/saxi/out/Release/bindings.node
 → /Users/nornagon/Source/plotter/saxi/Release/bindings.node
 → /Users/nornagon/Source/plotter/saxi/build/default/bindings.node
 → /Users/nornagon/Source/plotter/saxi/compiled/10.11.0/darwin/x64/bindings.node
 → /Users/nornagon/Source/plotter/saxi/addon-build/release/install-root/bindings.node
 → /Users/nornagon/Source/plotter/saxi/addon-build/debug/install-root/bindings.node
 → /Users/nornagon/Source/plotter/saxi/addon-build/default/install-root/bindings.node
 → /Users/nornagon/Source/plotter/saxi/lib/binding/node-v69-darwin-x64/bindings.node
    at bindings (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:2699:9)
    at Object../node_modules/@serialport/bindings/lib/darwin.js (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:338:91)
    at __webpack_require__ (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:21:30)
    at Object../node_modules/@serialport/bindings/lib/index.js (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:460:22)
    at __webpack_require__ (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:21:30)
    at Object../node_modules/serialport/lib/index.js (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:21113:17)
    at __webpack_require__ (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:21:30)
    at Module../src/ebb.ts (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:25513:68)
    at __webpack_require__ (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:21:30)
    at Module../src/server.ts (/Users/nornagon/Source/plotter/saxi/.webpack/main/index.js:26256:62)

What does your config.forge data in package.json look like?

  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [/* ... */],
      "plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/ui.tsx",
                  "name": "main_window"
                }
              ]
            }
          }
        ]
      ]
    }
  },

Please provide either a failing minimal testcase (with a link to the code) or detailed steps to
reproduce your problem. Using electron-forge init is a good starting point, if that is not the
source of your problem.

https://github.com/nornagon/electron-forge-native-module-repro

[nornagon]

This also appears to result in the packaging step not picking up the .node file, & causing the packaged app to fail with the same error.

[malept]

I wonder if this webpack plugin mentioned in Slack helps with this problem.

[MarshallOfSound]

@jrobeson This issue is specifically for native module issues, please don't hijack issue threads. I'm hiding your comment, please raise a new issue and follow the new template including providing a complete repro.

[ghost]

yes, this is for native modules. i'm using a native module with that exact configuration. I'm not asking for support. I just wanted to share a working configuration. Can you explain how that is offtopic for this particular thread?

[MarshallOfSound]

Fixed in v6.0.0-beta.39 if you use the webpack template --> npx create-electron-app --template=webpack

The actual solution for people with existing configs is to use the above mentioned version of forge and add these two rules in your webpack config.

  // Add support for native node modules
  {
    test: /\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },

[CraigMason]

Hi @MarshallOfSound

Just spent a few hours trying to find the best way to import multiple native modules. I am developing one locally, and have used npm link. This causes the native module in the linked module to be omitted using your example above.

I also note that your fork is some commits behind @zeit/webpack-asset-relocator-loader.

I'm currently resorting to using CopyWebpackPlugin and webpack.NormalModuleReplacementPlugin to provide my own implementation of bindings.js (which many modules use).

Just wondering if there's a better solution?

[jacksonkeating]

@CraigMason could you elaborate a little bit. I'm interested in your solution. It seems to be similar to what this SO post talks about. This post is also missing some key details too though. If you could post how you handled this error I could test it out on my setup.

https://stackoverflow.com/questions/50547649/using-node-js-addons-in-electrons-renderer-with-webpack/50547650#50547650