npm create electron-app app-name --template=webpack
npm install serialport
npm i -D electron-rebuild
Add this to package.json scrips
"install":"electron-rebuild"
run npm install
npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react
npm i react react-dom
create .babelrc
file and add
{"presets": ["@babel/preset-env", "@babel/preset-react"]}
add to the webpack.rules.js
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
renderer.js
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
console.log('Loaded React.');
ReactDOM.render(<div>Test.</div>, document.getElementById('root'));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
This is an issue with the Electron Forge webpack template, see electron/forge#2949