electron执行preload时报错，但是使用node时preload却正常加载

Question

报错如下所示：

使用node直接执行之后如下所示：

preload.js代码如下：

const {createServer} = require("http-server")
const server= createServer({
    root:"./build",
})
server.listen(41234, () => {
    console.log("服务已经启动")
})

electron 主进程代码：

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require("url");
const {WindowController} = require("./core/WindowController");
let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800, height: 900, webPreferences: {
            preload: path.join(__dirname, "preload.js"),
        },

    })
    // mainWindow.loadURL(url.format({
    //         pathname: path.join(__dirname, './build/index.html'),
    //         protocol: 'file:',
    //         slashes: true
    //     }
    // ))
    mainWindow.loadURL('http://localhost:41234/')
    // mainWindow.loadFile("build/index.html").then(r => console.log(r))
    //开启开发者工具
    mainWindow.webContents.openDevTools()
    //'mainWindow' equals 'null' when window is closed
    mainWindow.on('close', () => mainWindow = null)
    // WindowController.register();
}

app.on("ready",createWindow)
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
app.on('activate', () => {
    if (mainWindow === null) createWindow()
})

Answer 1

you should use esModules shouldn't CommonJS import modiles

// example
import { app, BrowserWindow } from 'electron'
import indexPreload from '/@preload/index'

// if have ts to declare electron static for static file serving
declare module '/@preload/*' {
  /**
   * The path of the preload file
   */
  const path: string
  export default path
}