{"id":25201,"library":"electron-jsx","title":"electron-jsx","description":"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.","status":"active","version":"0.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/mdjfs/electron-jsx","tags":["javascript","electron","jsx","babel","react","reload","nodeIntegration"],"install":[{"cmd":"npm install electron-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add electron-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add electron-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for transpiling JSX/ES6 to CommonJS.","package":"babel-core","optional":false},{"reason":"File system watcher to detect changes.","package":"chokidar","optional":false}],"imports":[{"note":"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).","wrong":"import electronJsx from 'electron-jsx'","symbol":"electron-jsx","correct":"require('electron-jsx')(__dirname, options)"},{"note":"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.","wrong":"const React = require('react')","symbol":"React","correct":"import React from 'react'"},{"note":"Similarly, use import syntax for ReactDOM in .jsx files.","wrong":"const ReactDOM = require('react-dom')","symbol":"ReactDOM","correct":"import ReactDOM from 'react-dom'"}],"quickstart":{"code":"// In your HTML file (e.g., src/index.html)\n<script>\nrequire('electron-jsx')(__dirname, {\n    reactDir: './react-app',\n});\n</script>\n<script react-src=\"./react-app/index.jsx\"></script>\n\n// In your electron.js main process\nconst { app, BrowserWindow } = require('electron');\nconst path = require('path');\nlet win;\n\nfunction createWindow() {\n  win = new BrowserWindow({\n    width: 800,\n    height: 600,\n    webPreferences: {\n      nodeIntegration: true,\n    },\n  });\n  win.loadFile(path.join(__dirname, './index.html'));\n  win.on('close', (_) => win = null);\n}\n\napp.on('ready', createWindow);\napp.on('activate', !win ? createWindow : undefined);\napp.on('window-all-closed', app.quit);\n\n// Sample React component in ./react-app/index.jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => <h1>Hello Electron!</h1>;\nReactDOM.render(<App />, document.getElementById('root'));","lang":"javascript","description":"Shows basic setup: HTML script tag to configure electron-jsx, Electron main process, and a simple React entry point."},"warnings":[{"fix":"Set webPreferences.nodeIntegration: true when creating BrowserWindow.","message":"nodeIntegration must be enabled in webPreferences for require to work in the renderer process.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Use CSS-in-JS libraries like Material-UI instead of separate .css files.","message":"Using stylesheet files is not recommended; may cause transpiler bugs.","severity":"gotcha","affected_versions":"<=0.0.5"},{"fix":"Pin version and test upgrades thoroughly.","message":"The package is in beta and may have breaking changes between minor versions.","severity":"breaking","affected_versions":"0.x.x"},{"fix":"Use <script react-src=\"./react-app/index.jsx\"> instead of regular src.","message":"The entry point script must have attribute react-src pointing to the main .jsx file.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Check for updated version that uses @babel/core.","message":"The package uses babel-core version 6.x which is deprecated; future updates may require migration.","severity":"deprecated","affected_versions":"<=0.0.5"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Set webPreferences: { nodeIntegration: true } in the BrowserWindow constructor.","cause":"nodeIntegration is disabled in the Electron window.","error":"ReferenceError: require is not defined"},{"fix":"Run 'npm install electron-jsx' in your project root.","cause":"The package is not installed in the correct directory or missing from package.json.","error":"Error: Cannot find module 'electron-jsx'"},{"fix":"Ensure your React files have .jsx extension and that the reactDir option points to the correct folder.","cause":"JSX is not transpiled because the file is not recognized as .jsx or the transpiler is not configured.","error":"SyntaxError: Unexpected token '<'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}