DEV Community

Start a new Electron app with React and Typescript.

Elizabeth Alcalá on April 16, 2020

What is Electron? Electron is a framework for creating native applications. It's open-source and cross-platform. If you already know Jav...

Read full post

raphael10-collab • Sep 29 '20 • 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)

Elizabeth Alcalá • Sep 29 '20

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

raphael10-collab • Sep 30 '20

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

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

Does this change causes some side-effects?

Elizabeth Alcalá • Sep 30 '20

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.

raphael10-collab • Sep 30 '20 • 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

raphael10-collab • Sep 30 '20 • 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

raphael10-collab • Oct 1 '20 • 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()],
};

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

raphael10-collab • Sep 30 '20

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

raphael10-collab • Sep 29 '20 • Edited

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

raphael10-collab • Sep 29 '20 • Edited

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

huncyrus • Apr 16 '20

Nice and easy tutorial.
Do you plan to continue it with adding more electron based functionality (to tease some capability of the electron itself) or discuss the webpack configuration to let even the beginners understand why-what-where to do in it?

Elizabeth Alcalá • Apr 16 '20

Hey, I could write about the webpack configuration, maybe a detailed and general view to understand how it works.
I thought about making more electron posts, maybe a serie about creating a complete app.

Danny Rottstegge • Jun 3 '20

Hey, really greate post. Exactly what I need.
Can you also describe how to pack it with electron-builder or electron-packager?

Thx in advice.

Elizabeth Alcalá • Sep 29 '20

Hi, sorry for the late reply, if you check the repo the configuration to pack it with electron-builder is already there.

AlenSci • Jan 30 '22 • Edited

Ok now this work, but after i run dev:electron I got an empty planck white page ?! image

Guarn • Sep 20 '20

Hi, great article, thanks a lot !

I just have a question, I'm struggled with a simple import of .png after the complete installation. Everything works great, including adding styled components and other packages, but I simply can't import an image file, I have an error : "no loaders configured for this file". I guess I have to edit the Webpack conf, but don't know how :(

Can you help me ?

Madza • Apr 16 '20

It can do wonders, VS Code as an example :)

scrmea • Aug 30 '20

Hi, great article, thank you!
I was wondering if babel is really necessary. Couldn't we use the the normal typescript transpiler for that? After all, we don't need to be compatible to different browsers if we ship our own browser.

Elizabeth Alcalá • Sep 29 '20

Hi, I haven't tried it but I think it could work.

claudia d • Apr 16 '20

Just what I need. You are my hero ❤️

Davvy • Oct 28 '20

Is it possible to start both react and electron with just one command?

whiteHatCip • Nov 26 '20

hi!
just add the concurrently npm package to the dev dependencies and your scripts should be like this:

"scripts": {
"dev": "concurrently --success first \"npm run dev:electron\" \"npm run dev:react\" -k",
"dev:electron": "cross-env NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron .",
"dev:react": "cross-env NODE_ENV=development webpack serve --config webpack.react.config.js --mode development && electron ."
},

As you can see, the dev script calls the concurrently command and the commands that you need to execute concurrently have to be put one after the other among quotation marks ("), escaping them, obviously.

AlenSci • Jan 30 '22 • Edited

contentBase and publicPath are invalid options in devServer.