Different behaviours on chrome and IE11 (Cannot use undefined "__Schema" from another module or realm.)

[helabenkhalfallah]

Intended outcome:
Having the same behaviours on chrome and IE11.

Actual outcome:
Running my application on chrome, it works perfectly.
However the same application runing on IE11, I get :

[error] [onerror] <>, <30>, <Cannot use undefined "__Schema" 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.> 

I don't use yarn, I use npm.
I checked that I have only one deps for graphql :

"dependencies": {
    "@apollo/client": "=3.3.21",
    "@lifeomic/axios-fetch": "=2.0.2",
    "apollo-link": "=1.2.14",
    "apollo-link-rest": "=0.7.3",
    "axios": "=0.18.0",
    "core-js": "=3.9.1",
    "es6-promise": "=4.2.8",
    "graphql": "=15.5.1",
    "graphql-anywhere": "=4.2.7",
    "isomorphic-fetch": "=3.0.0",
    "prop-types": "=15.7.2",
    "qs": "=6.10.1",

How to reproduce the issue:
Here is my code :

gqlQuery :

import { gql, } from '@apollo/client';

const GET_VERSION = gql`
  query version {
    version @rest(type: "Version", path: "/api/getMyVersion") {
        buildTimestamp 
        version
    }
  }
`;

GqlProvider :

import React from 'react';
import PropTypes from 'prop-types';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
} from '@apollo/client';
import { RestLink, } from 'apollo-link-rest';
import { buildAxiosFetch, } from '@lifeomic/axios-fetch';
import axios from 'axios';

const GqlProvider = ({
  configuration,
  children,
}) => {
  const restLink = new RestLink({
    uri: configuration?.baseUrl,
    responseTransformer: async (response) => response.json().then(({ donnees, }) => donnees),
    customFetch: buildAxiosFetch(axios, (config, input, init) => ({
      ...config,
      onUploadProgress: init.onUploadProgress,
    })),
  });

  const client = new ApolloClient({
    link: restLink,
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      {children}
    </ApolloProvider>
  );
};

GqlProvider.propTypes = {
  configuration: PropTypes.shape({
    gdaResourcesUrlPrefix: PropTypes.string,
    sgSignIn: PropTypes.shape({
      configurationUrl: PropTypes.string,
      enable: PropTypes.bool,
    }),
    awtBffUrlPrefix: PropTypes.string,
    awtSilentRoutes: PropTypes.bool,
  }).isRequired,
  children: PropTypes.node.isRequired,
};

export default GqlProvider;

Using on my component :

import React from 'react';
import { graphql, } from '@apollo/client/react/hoc';
import gqlQuery from './gqlQuery';

const {
  GET_VERSION,
} = gqlQuery;

const GqlFeaturePage = (({
  words,
  loading,
  error,
  data: {
    version,
  } = {},
}) => {
  console.log('values : ', {
    loading,
    error,
    version,
  });
  return (
    <div>Test</div>
    );
};

export default graphql(GET_VERSION)(GqlFeaturePage);

I tried also the hooks version, the same issue.

Routes.js :

<GqlProvider configuration={configuration}>
         <HashRouter>
                <Switch>
                     <Route
                          ....
        </HashRouter>
</GqlProvider>

Versions

  System:
    OS: Windows 10 10.0.18363
  Binaries:
    Node: 10.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 88.0.4324.190
    Edge: Spartan (44.18362.1593.0)
  npmPackages:
    @apollo/client: =3.3.21 => 3.3.21
    apollo-link: =1.2.14 => 1.2.14
    apollo-link-rest: =0.7.3 => 0.7.3

IE :

Chrome:

Thank you for your help :) :)

[benjamn]

@helabenkhalfallah Since you're using graphql@15.5.1, which fixes a source of false positives for this warning (see graphql/graphql-js#2894), this error most likely indicates you have more than one copy of the graphql package installed in your node_modules directory tree. Can you run npm ls graphql and report the output here?

[helabenkhalfallah]

Thank you @benjamn for your answer, here is the output of npm ls graphql :

`-- graphql@15.5.1

[helabenkhalfallah]

I analyzed my webpack PROD bundle and I searched for graphql, I get this :

I don't see a duplication.

[helabenkhalfallah]

Hello have you an idea ? thank you for your help :) :)

[benjamn]

@helabenkhalfallah Can you share your package.json and package-lock.json files? Alternatively, if you can create a runnable reproduction of the problem, that would be even better.

[github-actions]

We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support. Thank you!