DEV Community

Discussion on: Start a new Electron app with React and Typescript.

Collapse
 
raphael10collab profile image
raphael10-collab • Edited

Once I set nodeIntegration: false, I get this error:

external "url":1 Uncaught ReferenceError: require is not defined
     at Object.url (external "url":1)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object../node_modules/webpack-dev-server/client/utils/createSocketUrl.js 
(createSocketUrl.js:4)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.<anonymous> (client:20)
    at Object../node_modules/webpack-dev-server/client/index.js?http://localhost:4000  
(main.js:36416)
    at __webpack_require__ (bootstrap:789)
        at fn (bootstrap:100)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
elisealcala profile image
Elizabeth Alcalá

That's weird, what if you don't set nodeIntegration? does the error still there?

Collapse
 
raphael10collab profile image
raphael10-collab

I wrote this github's issue about this problem: github.com/elisealcala/electron-re...

I think it's an important issue, because if we want, for strict security reasons, keep nodeIntegration:false + contextIsolation:true, we must solve it

Collapse
 
raphael10collab profile image
raphael10-collab

I "solved" by changing in webpack.react.config.js :

target:
//"electron-renderer",
"web",

Does this change causes some side-effects?

Thread Thread
 
elisealcala profile image
Elizabeth Alcalá

Hi, maybe you will have problems when you build your app since that is what electron-renderer is used for. Do you have a repo to see your code? do you mind sharing it on the issue you opened? thanks.

Thread Thread
 
raphael10collab profile image
raphael10-collab • Edited

I loaded everything here: github.com/raphael10-collab/electr...
As you can see, I didn't anything special: it's your app, where the only differences are these ones:

  • electron/main.ts :

    webPreferences: {
    nodeIntegration: false

  • webpack.react.config.js :

    target:
    //"electron-renderer",
    "web",

If you revert back webpack.react.config.js from "web" to "electron-renderer", you should get the error:
"Uncaught ReferenceError: require is not defined at Object.url", when nodeIntegration is kept to false. If nodeIntegration is set to true, the problem disappears. But this is not what we are looking for, because we would like to have a more secure electron-react-typescript app with nodeIntegration:false

Thread Thread
 
raphael10collab profile image
raphael10-collab • Edited

I loaded everything on here: github.com/raphael10-collab/electr...

In your app I just modified these two things:

  • webPreferences:

    nodeIntegration: true

  • webpack.react.config.js :

    target:
    //"electron-renderer",
    "web",
    

If you revert back target: "web" to "electron-renderer" (the correct setting), you should get the error: "Uncaught ReferenceError: require is not defined at Object.url"
And if you set nodeIntegration:true the problem disappears. But if we want to keep our app more secure, we ought to keep nodeIntegration:false

Thread Thread
 
raphael10collab profile image
raphael10-collab • Edited

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

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: "./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()],
};
Enter fullscreen mode Exit fullscreen mode

This is the new repo: github.com/raphael10-collab/Electr...
git cloning it, and then executing yarn electron .
I get the app without any errors

Collapse
 
raphael10collab profile image
raphael10-collab • Edited

Once i set nodeIntegration: true again, the error disappears. So It Is clearly related to nodeIntegration: false

Collapse
 
raphael10collab profile image
raphael10-collab • Edited

So... my question is: how to solve the problem, while keeping nodeIntegration:false + contextIsolation:true for strict security reasons?