electron-jsx

library0.0.5jsnpmunverified

Real-time transpiler for Electron apps using JSX/React with hot reload. Version 0.0.5 is a beta release that watches a specified directory containing .jsx source files, transpiles them via Babel (converting ES6 imports to require), and outputs to a react-builds folder. It enables file-based development with no server or webpack required. The package is built on top of Babel, chokidar for file watching, and react to allow writing React components in Electron with nodeIntegration. Known limitations include potential bugs with stylesheet imports and beta stability.

web-framework

npm install electron-jsx

github ↗package ↗

INSTALL

IMPORT

SIG · ELECTRON-JSX

electron-jsx

web-frameworkjavascriptv0.0.5

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

electron-jsx

✓ require('electron-jsx')(__dirname, options)

✗ import electronJsx from 'electron-jsx'

This package is primarily used via require in an HTML script tag or in Electron's main process. It does not support ES module imports (no ESM export).

React

✓ import React from 'react'

✗ const React = require('react')

The package expects ES module import syntax in .jsx files for React and ReactDOM, which get transpiled to require calls. Using require directly may work but is not idiomatic.

ReactDOM

✓ import ReactDOM from 'react-dom'

✗ const ReactDOM = require('react-dom')

Similarly, use import syntax for ReactDOM in .jsx files.

Shows basic setup: HTML script tag to configure electron-jsx, Electron main process, and a simple React entry point.

// In your HTML file (e.g., src/index.html) <script> require('electron-jsx')(__dirname, { reactDir: './react-app', }); </script> <script react-src="./react-app/index.jsx"></script> // In your electron.js main process const { app, BrowserWindow } = require('electron'); const path = require('path'); let win; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); win.loadFile(path.join(__dirname, './index.html')); win.on('close', (_) => win = null); } app.on('ready', createWindow); app.on('activate', !win ? createWindow : undefined); app.on('window-all-closed', app.quit); // Sample React component in ./react-app/index.jsx import React from 'react'; import ReactDOM from 'react-dom'; const App = () => <h1>Hello Electron!</h1>; ReactDOM.render(<App />, document.getElementById('root'));

electron-jsx --version

Debug

Known issues

gotchanodeIntegration must be enabled in webPreferences for require to work in the renderer process.

fix

Set webPreferences.nodeIntegration: true when creating BrowserWindow.

affects: >=0.0.1

gotchaUsing stylesheet files is not recommended; may cause transpiler bugs.

fix

Use CSS-in-JS libraries like Material-UI instead of separate .css files.

affects: <=0.0.5

breakingThe package is in beta and may have breaking changes between minor versions.

fix

Pin version and test upgrades thoroughly.

affects: 0.x.x

gotchaThe entry point script must have attribute react-src pointing to the main .jsx file.

fix

Use <script react-src="./react-app/index.jsx"> instead of regular src.

affects: >=0.0.1

deprecatedThe package uses babel-core version 6.x which is deprecated; future updates may require migration.

fix

Check for updated version that uses @babel/core.

affects: <=0.0.5

Errors

Common errors & fixes

ReferenceError: require is not defined

nodeIntegration is disabled in the Electron window.

fix

Set webPreferences: { nodeIntegration: true } in the BrowserWindow constructor.

Error: Cannot find module 'electron-jsx'

The package is not installed in the correct directory or missing from package.json.

fix

Run 'npm install electron-jsx' in your project root.

SyntaxError: Unexpected token '<'

JSX is not transpiled because the file is not recognized as .jsx or the transpiler is not configured.

fix

Ensure your React files have .jsx extension and that the reactDir option points to the correct folder.

Upgrade

Version history

0.0.5latest on npm

Audit

Dependencies

babel-corerequiredUsed for transpiling JSX/ES6 to CommonJS.

chokidarrequiredFile system watcher to detect changes.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/mdjfs/electron-jsx ↗

packagehttps://www.npmjs.com/package/electron-jsx ↗