Upgrading to angular-6.x gives "Uncaught ReferenceError: global is not defined"

Question

I upgraded my project from angular-5.x to angular-6.x and it started giving the following error and even creation of dummy global variable does not work as given here Angular 6 Auth0 - global not defined

The error is as follows:

Uncaught ReferenceError: global is not defined
    at Object../node_modules/has-binary2/index.js (index.js:10)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/socket.io-parser/index.js (index.js:8)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/socket.io-client/lib/index.js (index.js:7)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app4pc/apiConnection/services/ApiConnectionServer.ts (auth.interceptor.ts:8)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app4pc/apiConnection/toServer.module.ts (ApiConnectionServer.ts:11)
    at __webpack_require__ (bootstrap:81)

after resolving this I get following error:

Uncaught ReferenceError: process is not defined
    at Object../node_modules/process-nextick-args/index.js (index.js:3)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:26)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/readable-stream/readable-browser.js (readable-browser.js:1)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/simple-peer/index.js (index.js:7)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/util/services/call.services.ts (notification.service.ts:12)
    at __webpack_require__ (bootstrap:81)

And continues on and on.

Check your CLI version: https://github.com/angular/angular-cli/issues/8160 — Randy Casburn, May 15 '18 at 17:56
In case anyone faces that error wit ng 6 and AWS cognito, I've found a workaround, described here: https://stackoverflow.com/a/50377270/2398593 — maxime1992, May 16 '18 at 17:55

score 137 · Answer 1 · answered May 23 '18 at 12:24

137

Adding this line to polyfills.ts should resolve node global error

(window as any).global = window;

The solution was mentioned in this angular-cli issue thred

answered May 23 '18 at 12:24

Vojtech

2,756
2
19
29

4

Adding to polyfills.ts, as suggested in angular-cli, didn't resolve the issue for me. It seems that some 3rd party library is attempting to access global BEFORE polyfills.ts is loaded (i.e., perhaps before angular is loaded?). The only way I could get around the issue was to follow the accepted solution above by modifying my index.html page. :-( – luvaas Sep 21 '18 at 16:33
3

If adding it _directly_ to polyfills.ts doesn't work, another way to still use this solution is to add a new file (called global-shim.ts, for example) and add the script in there, and then import the new file into polyfills.ts. This solution was mentioned in this [angular-cli issue thread](https://github.com/angular/angular-cli/issues/8160#issuecomment-392716566) – risingTide Nov 09 '18 at 19:35
3

Adding as an import to the polyfills.ts file as mentioned by @risingTide worked for me. – DoubleA Aug 06 '20 at 23:21
Adding that this issue came up for me after upgrading from a working Angular 11 to Angular 12. Lots of stuff must have changed under the hood... and booting out "global" must have been one of them. *I'm* not using it but someone must be looking for it. – MotoRidingMelon Jun 18 '21 at 07:18

score 126 · Accepted Answer · edited Jul 13 '19 at 19:17

126

Add following code in your starting page e.g. index.html

var global = global || window;
var Buffer = Buffer || [];
var process = process || {
  env: { DEBUG: undefined },
  version: []
};

Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Client</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
  </script>
</head>
<body>
  <app-root>
    <div class="loader"></div>
  </app-root>
</body>
</html>

Above will work on hybrid app (in Node environment) as well as in browser

for "Uncaught ReferenceError: global is not defined":
var global = global || window;
for "Uncaught ReferenceError: Buffer is not defined":
var Buffer = Buffer || [];
for "Uncaught ReferenceError: process is not defined":
var process = process || {
  env: { DEBUG: undefined }
}
for "Uncaught TypeError: Cannot read property 'slice' of undefined":
var process = process || {
  env: { DEBUG: undefined },
  version: []
};

edited Jul 13 '19 at 19:17

Martin Schneider

14,263
7
55
58

answered May 15 '18 at 17:57

Akhilesh Kumar

9,085
13
57
95

1

how to fix this error Uncaught TypeError: Cannot read property 'slice' of undefined – zeeshan Qurban Jun 14 '18 at 08:15
3

It worked but can you explain the reason for this error and how this make it fixed? – Krishnadas PC Jul 23 '18 at 06:36
1

Basically new angular environment, it expect these global variables which available in only node environment. So we made proxy for them. – Akhilesh Kumar Jul 23 '18 at 06:40
If you defined process value as above then the app consists as server side app. It wont consider as web app. By default you will receive process.browser value. – KARTHI SRV Jul 25 '18 at 10:29
This solution appears to break ASP.NET core SignalR currently. – Captain Prinny Sep 16 '19 at 15:52
2

For anyone coming here, do check the http client module being added is from @angular/common/http or from selenium-webdriver/http. selenium-webdriver/http also causes same issue. – Sp0T Oct 15 '19 at 11:01
Not working for: Node 10.15.0 Angular 8.3.23 Typescript 3.5.3 – Randhir Singh Feb 12 '20 at 09:24
What issue is coming? – Akhilesh Kumar Feb 14 '20 at 07:11

score 8 · Answer 3 · answered Oct 16 '19 at 16:23

8

I use HttpClient and accidentally selected the default import which was 'selenium-webdriver/http'

If your app.module.ts has import { HttpClient } from 'selenium-webdriver/http';

Update it to import { HttpClient } from '@angular/common/http';

That fixed my issue.

answered Oct 16 '19 at 16:23

Todd Skelton

6,839
3
36
48

Superb. It's the same issue for me. Did as you said and it worked. Thanks a lot. – Abhilash Nov 03 '19 at 08:27

score 5 · Answer 4 · answered Apr 03 '20 at 04:22

5

adding this line into pollyfills.ts fixed my problem (just a workaround as @kemalbirinci said here)

(window as any).global = window;

answered Apr 03 '20 at 04:22

Malay M

1,659
1
14
22

score 2 · Answer 5 · answered Aug 15 '19 at 09:18

In case, if your target is node in webpack (target: 'node'), because you want to fix "Can't resolve 'fs'. Then you're getting the following error Fix: "Uncaught ReferenceError: global is not defined" do it as follows node: { global: true, fs: 'empty' }. Bonus: if you got error "Uncaught ReferenceError: exports is not defined". simply add libraryTarget: 'umd'. The complete webpack config code is below.

const webpackConfig = {
  node: { global: true, fs: 'empty' }, // Fix: "Uncaught ReferenceError: global is not defined", and "Can't resolve 'fs'".
  output: {
    libraryTarget: 'umd' // Fix: "Uncaught ReferenceError: exports is not defined".
  }
};

module.exports = webpackConfig; // Export all custom Webpack configs.

Many solutions have been proposed here: https://github.com/angular/angular-cli/issues/8160

score 2 · Answer 6 · answered Aug 11 '20 at 15:55

Please be careful with using the top answer of adding the inline script to index.html. it will solve the immediate issue. However, if you are using SignalR, this will generate this error:

Error: Error parsing handshake response: TypeError: Right-hand side of 'instanceof' is not callable at HubConnection.push../node_modules/@microsoft/signalr/dist/esm/HubConnection.js.HubConnection.processHandshakeResponse

However, just defining global on its own will work and not break Signal R.

score 0 · Answer 7 · answered Jun 22 '20 at 05:29

0

In my case, socket.io entry was missing from Package.JSON file. Please check it and install it to the package.

answered Jun 22 '20 at 05:29

Vibhor Dube

4,173
1
22
32

score 0 · Answer 8 · answered Nov 19 '21 at 19:28

0

Adding the below lines in polyfills.ts worked fine for me after migrating to Angular v6.

(window as any).global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
global.process = require('process');

Answer taken from here

answered Nov 19 '21 at 19:28

Akash

51
7

score -3 · Answer 9 · answered Jun 18 '21 at 00:42

I don't know if this will help anyone understand their issue, I just thought I would inform anyone reading this who got the global not defined error on the user side to check your browser and/or device settings for pages asking for your location. I had just been inside the chrome browsers site settings and turned the option for location from ask first to blocked. The very next page I visited, the main content a data tableau exhibited this error message, soon as I toggled location back to ask first in chrome site settings and refreshed the page it loaded without error.

Upgrading to angular-6.x gives "Uncaught ReferenceError: global is not defined"

9 Answers9

Linked

Related