Registry / web-framework / babel-plugin-react-native-electron

babel-plugin-react-native-electron

library0.2.0jsnpmunverified

A Babel plugin (v0.2.0, stable) that resolves imports for react-native-electron, enabling React Native components to run in Electron. It remaps react-native imports to react-native-electron and optionally transforms to CommonJS. Needed when targeting Electron with React Native codebases. Rarely updated but fills a specific niche.

web-framework

npm install babel-plugin-react-native-electron

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-native-electron

web-frameworkjavascriptv0.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ module.exports = function(babel) { ... }

✗ import plugin from 'babel-plugin-react-native-electron'

Babel plugins are CommonJS modules; they cannot be imported via ESM in .babelrc.

config in .babelrc

✓ {"plugins": [["react-native-electron", { commonjs: true }]]}

✗ {"plugins": ["react-native-electron"]}

Without the options array, the plugin may not be configured correctly.

require in babel.config.js

✓ module.exports = { plugins: [['babel-plugin-react-native-electron', { commonjs: true }]] }

✗ module.exports = { plugins: ['babel-plugin-react-native-electron'] }

Use the full string (with babel-plugin- prefix) or the shorthand 'react-native-electron'.

Add the plugin to your Babel config with the commonjs option.

{ "plugins": [ ["react-native-electron", { "commonjs": true }] ] }

Debug

Known issues

gotchaThe plugin requires react-native-electron to be installed separately.

fix

Run 'yarn add react-native-electron' or 'npm install react-native-electron'.

affects: all

gotchaThe plugin only transforms imports/exports; it does not polyfill Node.js APIs (e.g., fs, path). You may need additional Webpack config or electron-renderer-target.

fix

Configure Webpack target: 'electron-renderer' and add node: { __dirname: false, __filename: false }.

affects: all

gotchaThe plugin does not handle CSS or asset imports; those must be processed separately (e.g., with Webpack).

fix

Add a CSS loader and file-loader/asset modules to your Webpack config.

affects: all

gotchaNo known breaking changes or deprecations.

fix

N/A

affects: all

Errors

Common errors & fixes

Module not found: Can't resolve 'react-native' in '...'

Babel is not transforming imports, so webpack tries to resolve 'react-native' directly (which fails in Electron).

fix

Ensure babel-plugin-react-native-electron is in your plugins array (e.g., .babelrc or babel.config.js) and that Babel is running on the affected files.

SyntaxError: Unexpected token import (or require)

Babel is not configured to handle ES module syntax for the plugin target.

fix

Add @babel/preset-env or @babel/plugin-transform-modules-commonjs to your Babel config.

window is not defined (ReferenceError)

Electron's renderer process does not have a DOM window during initialization if nodeIntegration is false or contextIsolation is true.

fix

Set nodeIntegration: true and contextIsolation: false in the BrowserWindow options, or use preload scripts.

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mybigday/babel-plugin-react-native-electron ↗

packagehttps://www.npmjs.com/package/babel-plugin-react-native-electron ↗