When nodeIntegration: false -> "Uncaught ReferenceError: require is not defined at Object.url (external "url":1)

[raphael10-collab]

@elisealcala

Once I set nodeIntegration: false in webPreferences I get this error:
"Uncaught ReferenceError: require is not defined at Object.url (external "url":1)

Clicking on "external 'url': 1" I get this line of code: module.exports = require("url")

Once I set nodeIntegration:false I get this error: "Uncaught ReferenceError: require is not defined at Object.url (external "url":1) "

enter image description here

Clicking on "external 'url': 1" I get this line of code: module.exports = require("url")

And once I set back to nodeIntegration: true, the error disappears.

I tried also to modify tsconfig.json as follows:

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

and add a /electron/types/node.d.ts file :

// https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules

declare module "url" {
  export interface Url {
    protocol?: string;
    hostname?: string;
    pathname?: string;
  }

  export function parse(
    urlStr: string,
    parseQueryString?,
    slashesDenoteHost?
  ): Url;
}

declare module "path" {
  export function normalize(p: string): string;
  export function join(...paths: any[]): string;
  export var sep: string;
}

declare module "require"

But the problem persists.

node version: v.14.5.0
electron version: 10.1.3
webpack version: 4.44.2
webpack-cli version: 3.3.12
webpack-dev-server version: 3.11.0
react version: 16.13.1
typescript version: 4.0.3
OS: Ubuntu 18.04.4 Desktop

How to solve the problem, while keeping nodeIntegration:false + contextIsolation:true for strict security reasons?

[raphael10-collab]

Removing the devServer part of webpack.react.config.js, while keeping target: "electron-renderer" make it work also with nodeIntegration: false :

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

module.exports = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    mainFields: ["main", "module", "browser"],
  },
  entry: "./src/app.tsx",
  target:
    "electron-renderer",
    //"web",
  devtool: "inline-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()],
};

So, I moved webpack.react.config.js and webpack.electron.config.js to a tmp folder and unified them all in a single file:
webpack.config.js :

const path = require("path");

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

electron_config = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  devtool: "source-map",
  entry: "./electron/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",
  },
};

module.exports = [react_config, electron_config]

Now, with in webpack.config.js :

 target:
    "electron-renderer",

and with nodeIntegration: false
I get executing yarn electron .

[Ruslan27032000]

@raphael10-collab, i have a same problem. Can you help me please?

[raphael10-collab]

Hi @Ruslan27032000 !!
Recently I discovered this well-done code: https://github.com/electron/electron-quick-start-typescript

[Ruslan27032000]

@raphael10-collab, I have a problem with contextIsolation and preload file. For example i want to make contextBridge and activate Notification. But there's problem. When i connect contextIsolation with preload i have error "global is not defined". I think this problem with webpack and i connect in webpack file " node: {global: true}". I fixed one error, but i got another "require is not defined". I google it, but all sources saying connect nodeIntegration:true . NodeIntegration was on from starting project and i never touch him. Idk what the problem and think you can help me). (p.s. webpack file is webpack.common.js). https://github.com/Ruslan27032000/Electron

[raphael10-collab]

@Ruslan27032000 Did you already have a look at this? https://mattallan.me/posts/electron-context-bridge/

At the moment I'm trying to resolve other problems, as you can see from here: https://stackoverflow.com/questions/65032402/error-ts2694-namespace-react-has-no-exported-member-reactnode-detailedh?noredirect=1#comment114972346_65032402

But within, hopefully, very few days, I will be back to preload file.

[Ruslan27032000]

@raphael10-collab. Yes i know a more about contextBridge thanks to this problem. I thought you can help me quickly(because you solve this problem) , because i can't solve this problem for week and i can't continue project without that.