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

[felixfbecker]

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 webpack/webpack#7032.

This makes it impossible to bundle graphiql with webpack.

[jgcmarins]

I think you can solve that just adding more extensions to your webpack rules:

test: /\.js?$/ -> test: /\.(js|mjs)?$/

[felixfbecker]

@jgcmarins to what rule?

[jgcmarins]

on your webpack.config.js

[felixfbecker]

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.

[xialvjun]

same error

here is my yarn.lock and package.json gist

[IvanGoncharov]

@xialvjun You use 0.13.2, please update graphql to 14.0.2

[IvanGoncharov]

Should be fixed in 14.0.0.
Feel free to open a new issue if you still experience this problem after 14.0.0 update.