一旦我设置 nodeIntegration:false -> "Uncaught ReferenceError: require is not defined at Object.ur

Posted 2023-03-22

【中文标题】一旦我设置 nodeIntegration:false -> "Uncaught ReferenceError: require is not defined at Object.url (external "url":1) "#electron-#react-#typescript

【英文标题】：Once I set nodeIntegration:false -> "Uncaught ReferenceError: require is not defined at Object.url (external "url":1) " #electron-#react-#typescript

【发布时间】：2021-01-15 07:22:39

【问题描述】：

一旦我设置 nodeIntegration:false 我得到这个错误： “未捕获的 ReferenceError：在 Object.url 中未定义要求（外部“url”：1）”

点击“external 'url': 1”我得到这行代码：module.exports = require("url")

tsconfig.json：

  "compilerOptions": 
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "es2015",
      "es2016",
      "es2017"
    ],
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true ,
    "esModuleInterop": true,
  

webpack.electron.config.js：

const path = require("path");
module.exports = 
  resolve: 
    extensions: [".tsx", ".ts", ".js"],
  ,
  devtool: "source-map",
  entry: "./electron/src/main.ts",
  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",
  ,
;

webpack.react.config.js：

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = 
  resolve: 
    extensions: [".tsx", ".ts", ".js"],
    mainFields: ["main", "module", "browser"],
  ,
  entry: "./electron/src/app.tsx",
  target: "electron-renderer",
  devtool: "source-map",
  module: 
    rules: [
      
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: 
          loader: "babel-loader",
        ,
      ,
    ],
  ,
  devServer: 
    contentBase: path.join(__dirname, "../dist/renderer"),
    historyApiFallback: true,
    compress: true,
    hot: true,
    port: 4000,
    publicPath: "/",
  ,
  output: 
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].js",
  ,
  plugins: [new HtmlWebpackPlugin()],
;

/electron/src/main.ts：

import  app, BrowserWindow  from "electron";
import * as path from "path";
import * as url from "url";

let mainWindow: Electron.BrowserWindow | null;

function createWindow() 
  mainWindow = new BrowserWindow(
    width: 800,
    height: 600,
    webPreferences: 
      nodeIntegration: false,
      contextIsolation: true,
      preload: '../preload/preload-app.ts',
      worldSafeExecutejavascript: true
    ,
  );

  if (process.env.NODE_ENV === "development") 
    mainWindow.loadURL(`http://localhost:4000`);
    mainWindow.webContents.openDevTools();
   else 
    mainWindow.loadURL(
      url.format(
        pathname: path.join(__dirname, "index.html"),
        protocol: "file:",
        slashes: true,
      )
    );
  

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


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

/src/preload/preload-app.ts :

window.addEventListener('DOMContentLoaded', () => 
  const replaceText = (selector, text) => 
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  

  for (const type of ['chrome', 'node', 'electron']) 
    replaceText(`$type-version`, process.versions[type])
  
)

节点版本：v.14.5.0 电子版：10.1.3 webpack 版本：4.44.2 webpack-cli 版本：3.3.12 webpack-dev-server 版本：3.11.0 反应版本：16.13.1 打字稿版本：4.0.3 操作系统：Ubuntu 18.04.4 桌面

出于严格的安全原因，如何解决问题，同时保持 nodeIntegration:false + contextIsolation:true？

【参考方案1】：

你正在使用“electron-main”的 webpack 目标包含该 url 导入。如果你想禁用渲染器的节点集成，那么你需要使用“web”之类的东西。