75

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.

2

9 Answers 9

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

4
  • 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, 2018 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
    – risingTide
    Nov 9, 2018 at 19:35
  • 3
    Adding as an import to the polyfills.ts file as mentioned by @risingTide worked for me.
    – DoubleA
    Aug 6, 2020 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. Jun 18, 2021 at 7:18
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: []
    };
    
8
  • 1
    how to fix this error Uncaught TypeError: Cannot read property 'slice' of undefined Jun 14, 2018 at 8:15
  • 3
    It worked but can you explain the reason for this error and how this make it fixed? Jul 23, 2018 at 6:36
  • 1
    Basically new angular environment, it expect these global variables which available in only node environment. So we made proxy for them. Jul 23, 2018 at 6: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, 2018 at 10:29
  • 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, 2019 at 11:01
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.

1
  • Superb. It's the same issue for me. Did as you said and it worked. Thanks a lot.
    – Abhilash
    Nov 3, 2019 at 8:27
5

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

(window as any).global = window;

0
2

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

2

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.

0

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

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

-3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.