Graphiql: Runtime Error "require is not defined" when bundling with webpack

[felixfbecker]

When bundling graphiql with webpack, 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 in graphql 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.

Also reported to graphql-js at https://github.com/graphql/graphql-js/issues/1536, but filing here for visibility.

[amcdnl]

Getting the same.... :(

[hisapy]

Me too

[tomeightyeight]

Fixed this issue by explicitly specifying latest release of graphql dependency:

https://github.com/graphql/graphql-js/

npm install --save graphql@^14.0.2

[airandfingers]

I had this error with another project with graphql as a dependency, and adding this to my Webpack rules fixed it for me:

{
  test: /\.mjs$/,
  include: /node_modules/,
  type: "javascript/auto",
}

As Stereobit explained, "Graphql-js uses .mjs as file extension which caused issues with the webpack build."

[acao]

we have a webpack example now, 0.17.0 should build just fine! just be sure to follow the example webpack and babel config.