Webpack puts multiple copies of graphql in the bundle, leading to "Expected {...} to be a GraphQL schema" errors from graphql-js

[rmsy]

Hello 👋

I'm attempting to set up a project using apollo-server-lambda, but I'm encountering the following issue when initializing the ApolloServer:

Error: Expected { __validationErrors: undefined, description: undefined, extensions: undefined, astNode: undefined, extensionASTNodes: [], _queryType: Query, _mutationType: undefined, _subscriptionType: undefined, _directives: [@cacheControl, @include, @skip, @deprecated, @specifiedBy], _typeMap: { Query: Query, String: String, CacheControlScope: CacheControlScope, Upload: Upload, Int: Int, Boolean: Boolean, __Schema: __Schema, __Type: __Type, __TypeKind: __TypeKind, __Field: __Field, __InputValue: __InputValue, __EnumValue: __EnumValue, __Directive: __Directive, __DirectiveLocation: __DirectiveLocation }, _subTypeMap: {}, _implementationsMap: {} } to be a GraphQL schema.
    at  (webpack://apollo-server-lambda-example/node_modules/graphql/type/schema.js:47:10)
    at schema (webpack://apollo-server-lambda-example/node_modules/graphql/type/validate.js:42:28)
    at validateSchema (webpack://apollo-server-lambda-example/node_modules/graphql/type/validate.js:66:15)
    at schema (webpack://apollo-server-lambda-example/node_modules/graphql/execution/execute.js:150:35)
    at assertValidExecutionArguments (webpack://apollo-server-lambda-example/node_modules/graphql/execution/execute.js:98:2)
    at executeImpl (webpack://apollo-server-lambda-example/node_modules/graphql/execution/execute.js:60:34)
    at execute (webpack://apollo-server-lambda-example/node_modules/apollo-server-core/dist/utils/schemaHash.js:15:31)
    at generateSchemaHash (webpack://apollo-server-lambda-example/node_modules/apollo-server-core/dist/ApolloServer.js:274:40)
    at generateSchemaDerivedData (webpack://apollo-server-lambda-example/node_modules/apollo-server-core/dist/ApolloServer.js:161:37)
    at  (webpack://apollo-server-lambda-example/node_modules/apollo-server-lambda/dist/ApolloServer.js:21:0)

I am using the exact same code as the getting started example, so I don't think the code is the issue here. The error I'm seeing is nearly identical to apollographql/apollo-client#6621, so I'm wondering if that issue may be related.

I've created a simple example project that you can use to reproduce this issue. You can run the example and reproduce the issue with the commands below:

# Run the lambda container image:
docker run -p 9000:8080 ghcr.io/rmsy/apollo-server-lambda-example

# In a different terminal, invoke the lambda:
curl -X POST -H 'Content-Type: application/json' -d '{"query":"query Query {\n  hello\n}\n"}' "http://localhost:9000/2015-03-31/functions/function/invocations"

Below are the package versions used in my example project. (I've never used Apollo before, so I don't know whether or not this issue is new to this version).

▶ yarn list --pattern "graph|apollo"
yarn list v1.22.5
├─ @apollo/[email protected]
├─ @apollographql/[email protected]
├─ @apollographql/[email protected]
├─ @apollographql/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 0.26s.

Any help would be appreciated; thank you for your time! 🙂

[glasser]

@rmsy Thanks for the reproduction! I get a permissions error trying to run your Docker container; is it public?

 $ docker run -p 9000:8080 ghcr.io/rmsy/apollo-server-lambda-example
Unable to find image 'ghcr.io/rmsy/apollo-server-lambda-example:latest' locally
docker: Error response from daemon: Head https://ghcr.io/v2/rmsy/apollo-server-lambda-example/manifests/latest: unauthorized.
See 'docker run --help'.

[rmsy]

@rmsy Thanks for the reproduction! I get a permissions error trying to run your Docker container; is it public?

@glasser It is now! Sorry about that. I didn't realize packages were created private by default.

[glasser]

I also get an error trying to docker build in your git repo (maybe I have a bad version of Docker?)

 ---> 6ad8f83fd508
Step 9/11 : COPY --from=build ${LAMBDA_TASK_ROOT}/dist/bundle.js* .
When using COPY with more than one source file, the destination must be a directory and end with a /

[glasser]

OK, I can run and reproduce it now. While I can't get docker build to work I was able to do yarn webpack && node dist/bundle.js locally and see the error.

This error almost certainly means that an instanceof GraphQLSchema check is failing, which often happens if you have multiple copies of the graphql library installed (probably not though) or webpack is doing something odd. It doesn't look like there are multiple graphqls though...

I do see that if instead run tsc and then mv dist/src/index.js index.mjs and run node index.mjs that the problem doesn't happen. (Well, I have to remove the assignment to exports.graphqlHandler first.) So this is definitely something wonky with how webpack is building your app. Maybe un-minify it (or tell webpack not to minify it — I'm not an expert) and see if that makes what's going on more clear?

I thiiiink this is an issue in your build process and not in AS itself so I'm going to close this for now but definitely interested in seeing if this can be tracked down further. How can I get webpack to not minify?

[rmsy]

All that is needed to prevent minification is the following added to webpack.config.js:

  optimization: {
    minimize: false
  },

However, trying without minification still results in the issue. Perhaps it could be related to webpack bundling, instead. I will attempt to reproduce without webpack and see if the problem persists, and I'll update here with what I find. Thanks for digging in to this!

P.S. -- Just FYI, I've pushed an update to the repo that 1) fixes the issue you were having building the image, which wasn't happening to me (perhaps due to version), and 2) disables minification. (I've also pushed an update to the image, which is now public, to represent the "don't minify" setting).

[glasser]

Cool. I ran yarn webpack, then inserted the line

    console.log(GraphQLSchema, schema.constructor, GraphQLSchema === schema.constructor);

before the throw in assertSchema at line 59327. This prints

[Function: GraphQLSchema] [Function: GraphQLSchema] false

which shows that there are two different GraphQLSchema constructor functions floating around. (And you can see them both in the unminified file.)

So I think this is a problem with your webpack/ts setup not deduping appropriately. Do let me know if it turns out to be triggered by something strange in apollo-server though!

[ramiAbdou]

Any updates on how to fix this? I'm having a similar issue.

[rmsy]

Apologies for the late response -- as @glasser pointed at several times, this was indeed related to webpack. Once I removed webpack entirely, this issue immediately went away. I haven't investigated whether there is a way to make this work with webpack yet or not.

[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"]

[camjackson]

My extensions were already ['.ts', '.js'], and I was still getting the error. What worked for me is aliasing the package as described in this comment:

  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      graphql$: path.resolve(__dirname, '../node_modules/graphql/index.js'),
    },
  },

(I needed a .. in the path because I'm using yarn workspaces, so the node_modules are in the parent directory.

[Josh-a-e]

My experience here is that by adding ".mjs" to my list of extensions, this issue magically disappeared. For me, it was only happening once my server-side ts node app was being bundled.

[gombek]

My experience here is that by adding ".mjs" to my list of extensions, this issue magically disappeared. For me, it was only happening once my server-side ts node app was being bundled.

Same here. What I can also mention here is that I have "module": "CommonJS" in my TS config as I'm using ts-node-dev for dev run

[efeaydin]

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"]

this is the exact solution. after spending 2 days, only this solved the problem magically.