Using link/schema and @graphql-tools/schema in combination and bundled by webpack results in "Cannot use GraphQLSchema from another module or realm"

[stoically]

Intended outcome:

Using SchemaLink with @graphql-tools/schema's makeExecutableSchema works as expected when bundled with webpack

Actual outcome:

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

It seems that link/schema pulls in CommonJS instead of ESM when bundled with webpack, so it's different classes.

Related issue in the @graphql-tools repo: ardatan/graphql-tools#1790

How to reproduce the issue:

Minimal repo: https://github.com/stoically/apollo-client-link-schema-webpack

Fix

Instead of directly reaching into graphql like so

apollo-client/src/link/schema/index.ts

Lines 1 to 2 in d470c96

	import { execute } from 'graphql/execution/execute';
	import { GraphQLSchema } from 'graphql/type/schema';

import from the top level, like so

import { execute, GraphQLSchema } from 'graphql';

Though, I guess the actual fix would be to dive into webpack and check what's going wrong

Workaround

webpack.config.js

const path = require("path")

  resolve: {
    alias: {
      "graphql/execution/execute": path.resolve(
        __dirname,
        "./node_modules/graphql/execution/execute.mjs"
      ),
      "graphql/validation/validate": path.resolve(
        __dirname,
        "./node_modules/graphql/validation/validate.mjs"
      ),
    },

Other things I tried which didn't work out

• https://consiiii.me/2020/10/13/graphql-issue/

  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto",
    });
  webpackConfig.resolve = {
    extensions: [".mjs", ".ts", ".tsx", ".js", ".jsx"],
  };

• webpack 4.0.0-beta.0 different behavior with .mjs files webpack/webpack#6459 (comment) & https://github.com/webpack/webpack/issues/6796#issuecomment-374980347

  const mainFields = ["main", "module"];
  // or const mainFields = ["module", "main"];
  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    resolve: { mainFields },
  });
  webpackConfig.resolve = {
    mainFields,
    alias: {
      graphql: path.resolve(__dirname, "./node_modules/graphql/index.js"),
    },
  };

Versions

System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
Binaries:
Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v12.18.4/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v12.18.4/bin/npm
Browsers:
Chrome: 86.0.4240.75
Firefox: 81.0.2
npmPackages:
@apollo/client: 3.3.0-beta.13 => 3.3.0-beta.13

[benjamn]

@stoically You can test the changes from #7185 using @apollo/client@3.3.0-beta.14. Given that this version appears to fix your reproduction (thanks for that!), we will publish the same changes in v3.2.5 soon, unless you have any remaining reservations.

[stoically]

@benjamn Works as expected with 3.3.0-beta.14 for me. Thanks for the fast turnaround and for broadening the scope of the PR including an insightful commit comment! No remaining reservations on my end.