electron-jsx

0.0.5 verified Fri May 01 auth: no javascript

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.

Common errors

error ReferenceError: require is not defined ↓

cause nodeIntegration is disabled in the Electron window.

fix

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

error Error: Cannot find module 'electron-jsx' ↓

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

fix

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

error SyntaxError: Unexpected token '<' ↓

cause 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.

Warnings

gotcha nodeIntegration must be enabled in webPreferences for require to work in the renderer process. ↓

fix Set webPreferences.nodeIntegration: true when creating BrowserWindow.

gotcha Using stylesheet files is not recommended; may cause transpiler bugs. ↓

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

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

fix Pin version and test upgrades thoroughly.

gotcha The 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.

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

fix Check for updated version that uses @babel/core.

Install

npm install electron-jsx

yarn add electron-jsx

pnpm add electron-jsx

Imports

electron-jsx
wrong
```
import electronJsx from 'electron-jsx'
```
correct
```
require('electron-jsx')(__dirname, options)
```
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
wrong
```
const React = require('react')
```
correct
```
import React from '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
wrong
```
const ReactDOM = require('react-dom')
```
correct
```
import ReactDOM from 'react-dom'
```
Similarly, use import syntax for ReactDOM in .jsx files.

Quickstart

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'));