electron / electron/forge

Native module import error in renderer after `yarn package` in Typescript + Webpack template

Open
#2,788 9 comments 0 reactions 0 assignees View on GitHub
plugin/webpack
Dominant language
TypeScript
Stars
7.1k
Forks
641
Avg merge
3d 1h
Merged PRs (30d)
30

Description

### Pre-flight checklist

- [X] I have read the [contribution documentation](https://github.com/electron-userland/electron-forge/blob/master/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [code of conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project uses.
- [X] I have searched the issue tracker for a bug that matches the one I want to file, without success.

### Electron Forge version

6.0.0-beta.63

### Electron version

18.0.0

### Operating system

Ubuntu x64

### Last known working Electron Forge version

_No response_

### Expected behavior

Using `webPreferences: { nodeIntegration: true, contextIsolation: false }` in the `BrowserWindow` constructor I should be able to import a native module in the renderer process, e.g.:

```ts
import lzmaNative from 'lzma-native';
console.log({ lzmaNative });
```

I should then be able to create a packaged app with `yarn package` and run the binary from the `out` folder. The console should log the imported `lzmaNative` object.

### Actual behavior

Console error:
```
Uncaught Error: Cannot find module '/native_modules/prebuilds/linux-x64/node.napi.node'
```

### Steps to reproduce

Please see this repo: https://github.com/chetbox/electron-forge-webpack-native-module-bug

Alternatively:
- `yarn create electron-app my-new-app --template=typescript-webpack && cd my-new-app`
- `yarn add lzma-native`
- `yarn add --dev @types/lzma-native`
- Add `webPreferences: { nodeIntegration: true, contextIsolation: false }` to the `BrowserWindow` construction in `index.ts`
- Add `target: 'electron-renderer',` to `webpack.renderer.config.js`
- Add the following to `renderer.ts` to import the native module and see that it has succeeded:
```ts
import lzmaNative from 'lzma-native';
console.log({ lzmaNative });
```

### Additional information

When running with `yarn start` the module is imported correctly and I see the log message as expected. 👍🏼

I have tried updating to the Electron Forge beta 63 and `@vercel/webpack-asset-relocator-loader` to `1.7.2` but I see the same behavior. (See repo linked above.)

I have tried add `electron-rebuild` but that doesn't seem to help. I'm not sure if I need it?

Note that I see the same behavior when Forge is set up to create an ASAR.

I'm using `lzma-native` as an example but we are having the same issue with `serialport@10` which is the library we actually want to use.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.