Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

process.env.NODE_ENV reference causes error "require is not defined" when bundling with webpack (for GraphiQL)

See original GitHub issue

When bundling graphql-js with webpack, e.g. as dependency of graphiql, you get this error at runtime:

ReferenceError: require is not defined
    at Module.../sourcegraph/node_modules/graphql/jsutils/instanceOf.mjs (instanceOf.mjs:28)
    at __webpack_require__ (bootstrap:63)
    at Module.../sourcegraph/node_modules/graphql/type/definition.mjs (definition.mjs:1)
    at __webpack_require__ (bootstrap:63)
    at Module.../sourcegraph/node_modules/graphql/type/validate.mjs (validate.mjs:1)
    at __webpack_require__ (bootstrap:63)
    at Module.../sourcegraph/node_modules/graphql/graphql.mjs (graphql.mjs:1)
    at __webpack_require__ (bootstrap:63)
    at Module.../sourcegraph/node_modules/graphql/index.mjs (index.mjs:2)
    at __webpack_require__ (bootstrap:63)

This is because instanceOf.js contains a reference to process.env: https://github.com/graphql/graphql-js/blob/dec24f9/src/jsutils/instanceOf.js#L19-L36

In the ESM build, which is used by webpack by following the module field in package.json, the file gets compiled to a .mjs file, which does not get applied the webpack ProvidePlugin, see https://github.com/webpack/webpack/issues/7032.

This makes it impossible to bundle graphiql with webpack.

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:7 (2 by maintainers)

Top GitHub Comments

4reactions

IvanGoncharovcommented, Nov 23, 2018

@xialvjun You use 0.13.2, please update graphql to 14.0.2

1reaction

felixfbeckercommented, Sep 28, 2018

I understand that you mean my webpack config. But there are many rules defined in there (for loaders), and none of them seem related to providing process.env. I already include .mjs in the regex for my loader rules.

Top Results From Across the Web

Bundle.js - Uncaught ReferenceError: process is not defined ...

To avoid error like denoted in the question I had have provide in webpack.config.js the next configuration (note defining variable level: process.env ):...

ReferenceError: “process is not defined” - GIMTEC

In NodeJS, “process” is defined, but not in the browser. This is because NodeJS ... This causes the error const { NODE_ENV }...

Handling process.env - Quasar Framework

You might be getting process is not defined errors in the browser console if you are accessing the variables wrong or if you...

TSConfig Reference - Docs on every TSConfig option

Lets you set a base directory to resolve non-absolute module names. You can define a root folder where you can do absolute file...

Environment Variables - Razzle

This path is used by react-error-overlay and webpack to power up the fancy runtime error ... Note: This does not impact production bundling....