Source build is successful in webpack on electron, but nothing is displayed

Electron react successfully builds source in webpack, but nothing is displayed
I've done a lot of research and fixed it, but I don't know what's wrong anymore.
"For reference, I am reading ""Node.js and React Application Development Techniques for JS Programmers""

const electron=require("electron");
const path=require("path");
const url=require("url");

const app = electron.app;
const BrowserWindow=electron.BrowserWindow;

// Define the Electron Lifecycle
// variable representing the main window
let mainWindow;
app.on("ready", createWindow);
app.on("window-all-closed",()=>{
  if(process.platform!=="darwin")app.quit();
});
app.on("activate",()=>{
  if(mainWindow===null)createWindow();
});

// Create a window to load content
function createWindow(){
  mainWindow = new BrowserWindow({
    width —800,
    height —600,
    // webPreferences: {nodeIntegration:false},
  });
  // Specify content to load
  mainWindow.loadURL(
    url.format({
      pathname —path.join(__dirname, "index.html"),
      protocol: "file",
      slashes —true,
    })
  );
  // What to do when a window closes
  mainWindow.on("closed",()=>{
    mainWindow = null;
  });
}

import React, {Component} from "react";
import ReactDOM from "react-dom";
const {clipboard} = require("electron");

// Define Components
export default class App extensions Component {
  constructor(props){
    super(props);
    // State initialization
    This.state = {
      text:",
      isActive: false,
      zen2han —true,
    };
    // Set the Timer for Clipboard Monitoring
    setInterval(e)=>this.tick(),1000);
  }
  // convert full-width alphanumeric characters to half-width alphanumeric characters
  convToHalfWidth(str){
    consts2=str.replace(/[!-~]/g,(e)=>{
      return String.fromCharCode(e.charCodeAt(0)-0xfee0);
    });
    returns2;
  }

  tick(){
    if(!this.state.isActive)return;
    const clip=clipboard.readText();
    let clip2 = clip;
    if(this.state.zen2han){
      clip2 = this.convToHalfWidth (clip);
    }
    if(clip!==clip2){
      clipboard.writeText(clip2);
    }
    This.setState({text:clip});
  }

  changeState(e){
    const name = e.target.name;
    This.setState({[name]:!this.state[name] });
  }

  render() {
    constaStyle={
      width: "100%",
      height: "300px",
      backgroundColor: "F4F4F4",
    };
    return(
      <div className="window">
        <div className="window-content">
          <div className="plane-group">
            <div className="plane-sm sidebar">
              <div>
                <ul className="list-group">
                  <licclassName="list-group-item">
                    <label>
                      <input
                        type="checkbox"
                        checked = {this.state.isActive}
                        name = "isActive"
                        onChange={(e)=>this.changeState(e)}
                      />
                      Enable Monitoring
                    </label>
                  </li>
                  <licclassName="liat-group-item">
                    <label>
                      <input
                        type="checkbox"
                        checked = {this.state.zen2han}
                        name = "zen2han"
                        onChange={(e)=>this.changeState(e)}
                      />
                      Half-width alphanumeric characters
                    </label>
                  </li>
                </ul>
              </div>
            </div>
            <div className="plane">
              <div className="padded-more">
                Clipboard:
                <br of >
                <textarea style={taStyle} value={this.state.text}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

// rewriting dom
ReactDOM.render(<App/>, document.getElementById("root"));

<html>

<head>
    <metacharset="UTF-8"/>
    <title>electron_fmt</title>
    <link rel="stylesheet" href="node_modules/photon/dist/css/photon.css"/>
</head>

<body>
    <divid="root"></div>
    <script src="out/bundle.js"></script>
</body>

</html>

var webpack=require("webpack");
var path=require("path");
varfs=require("fs");
var react = require("react");
var ReactDOM=require("react-dom");

var nodeModules={};
fs.readdirSync("node_modules")
  .filter(function(x){
    return [".bin"].indexOf(x)===-1;
  })
  .forEach(function(mod){
    nodeModules[mod] = "commonjs" + mod;
  });

module.exports={
  // If you set the mode value to production, it will be optimized.
  // When set to development, the source map is valid and the JS file is output.
  mode: "production",

  // Main JavaScript file (entry point)
  entry: "./src/index.js",
  target: "electron-main",
  // File Output Settings
  output: {
    //  Output File Directory Name
    path: `${__dirname}/out`,
    // Output File Name
    filename: "bundle.js",
  },
  module: {
    rules:[
      {
        // For extension .js
        test://\.js$/,
        use:
          {
            // use Babel
            loader: "babel-loader",
            // Specify Babel Options
            options: {
              presents: [
                // Convert ES2020 to ES5 by specifying a preset
                "@babel/preset-env",
                // Interpreting React's JSX
                "@babel/react",
              ],
            },
          },
        ],
      },
    ],
  },
  // externals:nodeModules,
};

"name":"electron_fmt",
    "version": "1.0.0",
    "description":",
    "main" : "main.js",
    "scripts": {
        "test": "echo\" Error: no test specified\"&exit1",
        "start": "electron."",
        "build": "webpack"
    },
    "keywords": [ ],
    "author":",
    "license": "ISC",
    "dependencies": {
        "@types/react-dom": "^16.9.8"
    },
    "devDependencies": {
        "@babel/core": "^7.11.0",
        "@babel/preset-env": "^7.11.0",
        "@babel/preset-react": "^7.10.4",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.1.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "electron": "^9.1.2",
        "fs": "0.0.1-security",
        "photon": "git+https://github.com/connors/photon.git",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12"
    }
}

node.js reactjs webpack electron babeljs

2022-09-30 20:21