Simple Webpack Bundle throws error on run

[JonathanTurnock]

Hello 👋,
I have been attempting to bundle an express application with Webpack where GraphQL has been recently added but am failing miserably 😔

I have created a simple reproduction repository with what I believe to represent a bug, I have searched through the documentation and checked for anything missing but can't find much in the way of reference to bundling with Webpack

https://github.com/JonathanTurnock/graphql-webpack-error.

Essentially I am stuck with the following error when attempting to run the bundle, again this was easily re-producable bu tits probably just a webpack config issue? any help would be massively appreciated 🙏

➜  repro-repo git:(master) ✗ yarn build:run
yarn run v1.22.10
$ cross-env NODE_ENV=development node ./build/bundle.js
webpack://repro-repo/./node_modules/graphql/jsutils/instanceOf.js?:27
      throw new Error("Cannot use ".concat(className, " \"").concat(value, "\" from another module or realm.\n\nEnsure that there is only one instance of \"graphql\" in the node_modules\ndirectory. If different versions of \"graphql\" are the dependencies of other\nrelied on modules, use \"resolutions\" to ensure only one version is installed.\n\nhttps://yarnpkg.com/en/docs/selective-version-resolutions\n\nDuplicate \"graphql\" modules cannot be used at the same time since different\nversions may have different capabilities and behavior. The data from one\nversion used in the function from another could produce confusing and\nspurious results."));
      ^

Error: Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.
    at instanceOf (webpack://repro-repo/./node_modules/graphql/jsutils/instanceOf.js?:27:13)
    at isSchema (webpack://repro-repo/./node_modules/graphql/type/schema.js?:42:34)
    at assertSchema (webpack://repro-repo/./node_modules/graphql/type/schema.js?:46:8)
    at validateSchema (webpack://repro-repo/./node_modules/graphql/type/validate.js?:42:28)
    at assertValidSchema (webpack://repro-repo/./node_modules/graphql/type/validate.js?:66:16)
    at assertValidExecutionArguments (webpack://repro-repo/./node_modules/graphql/execution/execute.js?:152:35)
    at executeImpl (webpack://repro-repo/./node_modules/graphql/execution/execute.js?:100:3)
    at Object.execute (webpack://repro-repo/./node_modules/graphql/execution/execute.js?:62:63)
    at Object.generateSchemaHash (webpack://repro-repo/./node_modules/apollo-server-core/dist/utils/schemaHash.js?:15:32)
    at ApolloServer.generateSchemaDerivedData (webpack://repro-repo/./node_modules/apollo-server-core/dist/ApolloServer.js?:269:41)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  repro-repo git:(master) ✗ 

[cjnoname]

same issue here, anyone can help?

[abernix]

The error message is coming from the graphql package (not from Apollo Server) and it's an intentional design feature of the graphql to only allow a single copy of it to be used in a graph. Have you taken any preliminary debugging steps to dig into the condition the error message is highlighting a bit? For example, identifying the multiple instances of graphql in your project?:

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

Out of curiosity, what is your particular use case for using a bundler like Webpack with server code instead of just running it unbundled? Apollo Server doesn't try and do anything to intentionally preclude you from using something like Webpack, but it's not a concern we try to tackle since there can (often) be less benefit to re-bundling in server environments.

[EthanOrlander]

@abernix Not sure about Jonathan's use case, but I am using apollo-server-lambda and Webpack can make a big difference for cold starts (even when you're using Lambda Layers).

I think I've run into this issue before. I'll see if I can get anywhere on a fix.

[mmouterde]

Same error here.
According to the BundleAnalyzerPlugin, GraphQL is bundled once in .js once in .mjs.

[mmouterde]

fixed using this workaround #4637

[thekevinbrown]

Here's a reproduction for the team: https://github.com/thekevinbrown/graphqljs-instanceof-reproduction

[glasser]

We've had several reports of webpack leading to multiple copies of graphql in the output, causing errors (because of how graphql works), such as #4637 and #4983. I appreciate that there are real reproductions here. But they seem like issues with webpack rather than apollo-server. If a standard webpack setup leads to multiple copies of graphql in generated code (even if, like @thekevinbrown 's reproduction, the yarn.lock file shows only one version needed), then that seems like the problem. The single-copy constraint doesn't come from apollo-server, but from graphql (graphql-js) itself.

If there's something about how Apollo Server is set up that makes webpack fall into a particular trap I'd be happy to fix that. But I think the best path forward would be to open an issue with webpack asking why there are multiple copies of graphql in your output even though your yarn.lock only shows one.

If the webpack team is able to identify a particular problem with Apollo Server that leads to this, then I'd be happy to make changes to work around the issue. But delving deep into webpack details to understand why combining webpack with graphql causes problems isn't playing to the strengths of anyone on the Apollo Server team.

[botre]

I have also encountered this issue in my Apollo Webpack Typescript project, I have discovered the following:

The extensions order inside the Webpack configuration seems to have a major influence.

This will produce the error:

extensions: [".js", ".mjs", ".ts"],

This will not produce the error:

extensions: [".ts", ".mjs", ".js"]