Angular 6 - process is not defined when trying to serve application

Question

I am getting the following error when I try to serve my angular 6 application using cosmicjs:

Uncaught ReferenceError: process is not defined
    at Object../node_modules/cosmicjs/dist/index.js (index.js:6)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app.component.ts (main.js:94)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app.module.ts (app.component.ts:9)
    at __webpack_require__ (bootstrap:81)
    at Object../src/main.ts (environment.ts:18)
    at __webpack_require__ (bootstrap:81)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:81)

My latest theory is something to do with the process.env property being undefined.

I'm following this tutorial here

and my exact code can be found here

The tutorial seems to be using an older version of angular that uses .angular-cli.json instead of the new angular.json and I think this is part of the issue in trying to specify the environment variables.

score 74 · Answer 1 · answered Jul 08 '18 at 12:45

74

In polyfill.ts, add this line:

(window as any).process = {
  env: { DEBUG: undefined },
};

Reference: https://github.com/algolia/algoliasearch-client-javascript/issues/691

Or npm i -S process, then add this to polyfill.ts:

import * as process from 'process';
window['process'] = process;

answered Jul 08 '18 at 12:45

A T

13,008
21
97
158

7

Why would my app randomly need this? – Omzig Aug 18 '21 at 21:06
see [my answer](https://stackoverflow.com/a/73432010/5053158) for a possible explanation – c_froehlich Aug 21 '22 at 06:02
thanks. i had same problem on upgrade to angular13 . resolve by your solution – Omid Rahimi Apr 24 '23 at 05:56

score 30 · Answer 2 · edited Feb 12 '20 at 23:15

30

To fix the problem, I added the following lines to 'polyfills.ts' file,

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

edited Feb 12 '20 at 23:15

Saeed D.

1,125
1
11
23

answered Feb 12 '20 at 19:58

buster95

640
7
7

score 10 · Answer 3 · answered May 13 '18 at 07:53

10

This is an incompatibility with Angular v6. They removed support (shim) of process and global variables in browser.

I suggest you to use Angular 5, till cosmic.js fixes the error. Maybe you can even open an issue for it.

answered May 13 '18 at 07:53

Daniel Habenicht

2,133
1
15
36

Thx for the link to filipesilva comment. It is really useful to understand why this incompatibility exists. The fact is that we SHOULD NOT use a workaround to make 'path', 'fs' or other node modules work in a browser ... we SHOULD just not use them and use polyfills if needed. – M'sieur Toph' Apr 29 '20 at 12:19

score 9 · Answer 4 · answered Sep 13 '18 at 07:50

This is an incompatibility with Angular 6. They removed support (shim) of process and global variables in browser.

Adding the following before your closing into your index.html will remove the error.

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

score 3 · Answer 5 · answered Mar 03 '20 at 21:49

3

As long as you are not satisfied with putting some random logic into polyfills.ts and looking for a way to actually access the process.env in your Angular application please find below solution.

Change your "builder": "@angular-devkit/build-angular:dev-server" to "builder": "@angular-builders/custom-webpack:dev-server" in angular.json.

answered Mar 03 '20 at 21:49

Daniel Danielecki

8,508
6
68
94

1

Has `process` been removed again? I have this already done for a custom webpack, but I still get `process` errors – ntgCleaner Dec 02 '21 at 20:57
Haven't touched `Angular` for a while already, can't help :( – Daniel Danielecki Dec 03 '21 at 08:59

score 0 · Answer 6 · answered Aug 21 '22 at 06:00

I had the same issue "out of a sudden" in an Angular 14 app.

It turned out I actually introduced it by myself: I forgot to remove a call to inspect (from Nodes util package) in a service class. Removing the call to inspect did the trick for me.

I added the call to inspect while debugging Jasmine unit tests. Running unit tests in Jasmine executes the code in Node. This is why it works in that environment.

In inspect there is a line

   if ( process.env.DEBUG )

Since process is not globally defined in the browser, execution of this line fails when running as Angular app.

This type of error is not restricted to util.inspect but will happen with any core module from Node running in the browser and accessing internally process.env.

Since the internal implementation of the core modules may vary from Node version to Node version, using core modules from Node puts the risk to you application that updating Node on the machine where the deployment build happens can break your application.

"path" is a another candidate that comes to my mind.

score -1 · Answer 7 · answered Feb 24 '22 at 10:27

-1

<script>
    if (global === undefined || process === undefined) {
      var global = window;
      window['process'] = {
        env: { DEBUG: undefined },
      };
    }
</script>

answered Feb 24 '22 at 10:27

Gowtham Gowda

1,780
1
10
7

Angular 6 - process is not defined when trying to serve application

7 Answers7

Linked