Electron无法加载preload.js问题

Question

我自己花了3天时间来设置电子并做出反应。正当我以为一切就这样的时候，新的问题又出现了

我想将 Electron 与 React 连接起来。但我无法获取 preload.js 文件

如果没有 preload.js 文件，执行和构建都可以正常工作。但是添加preload.js文件后，却说找不到preload.js文件（否则可以正常工作）

我尝试了很多尝试，比如更改搜索出来的Electron的webPreferences的设置，但都失败了。

我不知道如何解决这个问题。谢谢你告诉我如何解决它。 我附上了我的代码的几个部分

下图是我的文件夹结构

这是我的电子代码

// electron/main.js
import { app, BrowserWindow } from "electron";
import path from "path";

let mainWindow;
const isDev = process.env.NODE_ENV === "development";

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      preload: path.resolve(__dirname, "preload.js"),
    },
  });

  if (isDev) {
    mainWindow.loadURL(`http://localhost:3000`);
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile(`${path.join(__dirname, "/index.html")}`);
  }

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
}

app.on("ready", createWindow);
app.allowRendererProcessReuse = true;

这是我的 preload.js

// electron/preload.js

import { ipcRenderer } from "electron";

process.once("loaded", () => {
  window.ipcRenderer = ipcRenderer;
});

这是我的 package.json

最后这是我的 webpack.electron.config.js

const path = require("path");

module.exports = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  devtool: "source-map",
  entry: "./electron/main.js",
  target: "electron-main",
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  node: {
    __dirname: false,
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
};

Answer 1

显然沙箱属性可能会导致此错误消息，在电子20中更改为默认truehttps://stackoverflow.com/a/73587628/2077884