Uncaught ReferenceError: process is not defined

[thojanssens]

graphql-ws has a dependency on graphql:

"peerDependencies": {
  "graphql": ">=0.11 <=16"
},
"devDependencies": {
  "graphql": "^16.5.0"
}

The graphql library assumes there is a global variable process , e.g.:

process.env.NODE_ENV === 'production'

This variable doesn't seem to be initialized by all bundlers (webpack specific?).

Is it possible to make this library only an optional dependency to graphql-ws for that reason?

Note that I have been looking for solutions to avoid the error, but there is no real clean solution available according to my searches.

Note also that a bunch of people encounter this annoying error (by googling "Uncaught ReferenceError: process is not defined") because of third-party libraries depending on libraries making use of process.

[enisdenjo]

graphql is a peer dependency of graphql-ws, it is necessary for proper functioning of the library and therefore cannot be optional.

Furthermore, seems like this has already been fixed with graphql/graphql-js#3501, but not released as of now.

Until it gets released, I'd go with appending the recommended polyfil in your index.html:

<script>
  window.process = globalThis.process = {
    env: {
      NODE_ENV: "development" // or "production", depending on your environment
    }
  };
</script>

or by making your bundler replace all instances of process.env.NODE_ENV === 'production' with true/false.

[thojanssens]

I personally use graphql-ws only for the client (as I do not run JS on the server but use a different programming language).

I had a quick look into the code and I do not see any use of the graphql library. Could you tell how this dependency is used? Particularly for the client-side code. Thank you

[enisdenjo]

graphql should be safe in the browser, I think the issue is more with your bundler. Can you share the full callstack of when Uncaught ReferenceError: process is not defined occurs?

As far as the client goes, graphql is used for types here and in the common.ts file.

[thojanssens]

Thank you and sorry, somehow I missed that import...
I have this error in the Chrome browser, it only shows where the error in the file is:
File: instanceOf.mjs:13:3

export const instanceOf =
  /* c8 ignore next 6 */
  // FIXME: https://github.com/graphql/graphql-js/issues/2317
  // eslint-disable-next-line no-undef
  process.env.NODE_ENV === 'production'

The bundler is rollup. The solutions are all hacks.
rollup/rollup#487
Can you have a quick look? ^

If you were me, what would you do? This error has been draining me and others.

[enisdenjo]

Seems like this has already been fixed with graphql/graphql-js#3501, but not released yet. 😕

Until it gets released, I'd go with appending the recommended polyfil in your index.html:

<script>
  window.process = globalThis.process = {
    env: {
      NODE_ENV: "development" // or "production", depending on your environment
    }
  };
</script>

or by making your bundler replace all instances of process.env.NODE_ENV === 'production' with true/false.

[thojanssens]

Ur a goddamn hero 🦸
Thank you for your help!