apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.38k stars 2.66k forks source link

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

Closed helabenkhalfallah closed 1 year ago

helabenkhalfallah commented 3 years ago

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 : image

Chrome: image

Thank you for your help :) :)

benjamn commented 3 years ago

@helabenkhalfallah Since you're using graphql@15.5.1, which fixes a source of false positives for this warning (see https://github.com/graphql/graphql-js/pull/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 commented 3 years ago

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

`-- graphql@15.5.1
helabenkhalfallah commented 3 years ago

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

image

image

image

image

image

I don't see a duplication.

helabenkhalfallah commented 3 years ago

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

benjamn commented 3 years ago

@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[bot] commented 1 year ago

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!