Upgrading to angular-6.x gives "Uncaught ReferenceError: global is not defined"
JavascriptAngularAngular CliAngular6Javascript Problem Overview
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 https://stackoverflow.com/questions/50209019/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.
Javascript Solutions
Solution 1 - Javascript
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
Solution 2 - Javascript
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":
lang-js var global = global || window;
> - for "Uncaught ReferenceError: Buffer is not defined":
lang-js var Buffer = Buffer || [];
> - for "Uncaught ReferenceError: process is not defined":
lang-js var process = process || { env: { DEBUG: undefined } }
> - for "Uncaught TypeError: Cannot read property 'slice' of undefined":
lang-js var process = process || { env: { DEBUG: undefined }, version: [] };
Solution 3 - Javascript
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.
Solution 4 - Javascript
adding this line into pollyfills.ts fixed my problem (just a workaround as @kemalbirinci said here)
(window as any).global = window;
Solution 5 - Javascript
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
Solution 6 - Javascript
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.
Solution 7 - Javascript
In my case, socket.io entry was missing from Package.JSON file. Please check it and install it to the package.
Solution 8 - Javascript
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
Solution 9 - Javascript
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.