angular-electron: external "require('url')":1 Uncaught ReferenceError: require is not defined

@maximegris When i run npm run start:web to serve the app from the browser i am getting following error. It looks like chrome does not know how to interpret require('url') which is node module. the only place i can find this import is in webpack externals. Can you please point me into right direction?

external "require('url')":1 Uncaught ReferenceError: require is not defined
    at Object.<anonymous> (external "require('url')":1)
    at __webpack_require__ (bootstrap 151bbb78dee4aab80101:54)
    at Object.<anonymous> (client:2)
    at Object.<anonymous> (client?ffdb:204)
    at __webpack_require__ (bootstrap 151bbb78dee4aab80101:54)
    at Object.<anonymous> (polyfills.bundle.js:5881)
    at __webpack_require__ (bootstrap 151bbb78dee4aab80101:54)
    at webpackJsonpCallback (bootstrap 151bbb78dee4aab80101:25)
    at polyfills.bundle.js:1
14:57:33.753 core.es5.js:350 Uncaught reflect-metadata shim is required when using class decorators

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 22 (5 by maintainers)

Most upvoted comments

I had this problem happen recently when upgrading from Electron 4 to Electron 5.

Solution: https://stackoverflow.com/questions/55093700/electron-5-0-0-uncaught-referenceerror-require-is-not-defined

It turns out, nodeIntegration was true by default in previous electron versions, but false by default in 5.0.0.

Setting nodeIntegration to true may fix your upgrade from Electron 4 to 5:

new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,

+19

whyboris on May 9, 2019

@maximegris Great project. Thank you. This is my 3rd project with it.

I just cloned angular-electron to start a new project (3rd). The same error with require came up with npm start for only http://localhost:4200/ (as in my 2nd project which I never spent time to figure out. Now I did). npm start invokes both web & electron app. Which is the ideal scenario.

Also, running ng:serve produces the require error for only http://localhost:4200/.

The solution:

Do not use ng:serve
Do use: ng:serve:web

or change npm start to:

"start": "npm-run-all -p ng:serve:web electron:serve"

I suggest removing reference to ng:serve.

thomascayne on Feb 15, 2020

@maximegris i am getting this on newly cloned project. Steps to reproduce:

clone new project
npm install
npm run start:web

Any idea where to start looking? Maybe externals in webpack config?

okonon on Oct 2, 2017

doesn’t work for me =(

zombodotcom on Sep 30, 2019

this is still happening

simonmicheal on Jan 23, 2019

I managed to solve this by adding target: 'web' in my webpack.config.js and thereafter restarting my application with npm start!

mkotsollaris on May 1, 2018

@thomascayne Hi Thomas In the end, I decided to download the latest version of Angular Electron 10.4.1 The problem is, I was missing the NodeJs plugins for WebKit 5+, and the latest version has fixed this issue. It took me all day to set the project up again. It’s a shame there isn’t a way to update the Angular Electron core? I decided to clone the maximegris repo, install my node modules on top and then add my code back in, gradually. But, amazingly, I managed to get everything working again, but this time with Angular 13 & Electron 16. I have noticed, it loads about twice as quickly. So, there have been some major improvements made, under the hood! 🙂 The main thing is that I can now access the application via the browser using localhost:4200 🙏

Anyway, thanks for all your help, last night. You definitely got me thinking in the right direction. 💡

charlesr1971 on Dec 21, 2021

@maximegris The same issue I can not understand how to solve. Is it something in webpack configuration?

nikulinsanya on Feb 21, 2018