Skip to main content

Native Modules

This guide covers how to consume native modules. For installing native modules see the module structure docs.

What are Native Modules?​

Native node modules are node dependencies that are written in C++, C, or Rust. Native modules may need to be compiled against a specific version of node. If you change your node version then you'll need to recompile your native modules, which will be done automatically on postinstall.

electron-rebuild will detect and recompile your native modules against the version of node being used by electron. Changing your electron version will require a recompilation.

Native Modules in electron-react-boilerplate​

Native modules in electron-react-boilerplate have special requirements and are thus handled differently than regular modules. Native modules are problematic when bundled with webpack and so electron-react-boilerplate avoids bundling them -- intead they are treated as webpack externals. Native modules in electron-react-boilerplate are installed to the ./release/app/node_modules directory and are copied into your electron app before it is packaged. This allows root dependencies in ./node_modules (such as webpack, babel, and react) to not be packaged with your app, which significantly app bloat.

Main Process Native Modules​

You can import native modules as usual in the main process as you would other modules. Types for native module dependencies (such as @types/sqlite) should be installed to your root package.json since they are not required in production.

Renderer Process Native Modules​

Loading remote content in the renderer process with node integration enabled is a security vulnerability and is discouraged by electron's security documentation. Because of this, node integration is disabled by default.

Make the following changes to opt in to node integration:

webpack.config.renderer.prod.ts
- target: ['web', 'electron-renderer'],
+ target: 'electron-renderer',
webpack.config.renderer.dev.ts
- target: ['web', 'electron-renderer'],
+ target: 'electron-renderer',
webpack.config.renderer.prod.ts
- library: {
-  type: 'umd',
- },
webpack.config.renderer.dev.ts
- library: {
-  type: 'umd',
- },
main.ts
  webPreferences: {
+   nodeIntegration: true,
+   contextIsolation: false,
-   preload: path.join(__dirname, 'preload.js'),
  }
webpack.config.main.prod.ts
  entry: {
    main: path.join(webpackPaths.srcMainPath, 'main.ts'),
-   preload: path.join(webpackPaths.srcMainPath, 'preload.js'),
  },