@apollo/client is crashing trying to render an ApolloProvider with client in React & Typescript

[Billy-]

@apollo/client is crashing trying to render an ApolloProvider with client in React & Typescript - throws Uncaught TypeError: Cannot read property 'Symbol(__APOLLO_CONTEXT__)' of undefined at getApolloContext (ApolloContext.ts:32) during the first render.

I originally encountered this issue a little while (~2 months) ago trying to migrate some projects from apollo-boost + @apollo/react-hooks to @apollo/client, but didn't have the time to follow it up properly. I have just picked it back up again and still facing the same error, after having updated to latest dependencies such as webpack and ts-loader. The only mention of this issue I could ever find was here.

Intended outcome:

Everything works ok (renders) using @apollo/client ApolloProvider

Actual outcome:

Client crashes on first render with the following error:

Uncaught TypeError: Cannot read property 'Symbol(__APOLLO_CONTEXT__)' of undefined
    at getApolloContext (ApolloContext.ts:32)
    at ApolloProvider (ApolloProvider.tsx:16)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)

How to reproduce the issue:

This happened when trying to migrate some projects from using apollo-boost and @apollo/react-hooks to @apollo/client v3.x.

I created a minimal test repo from scratch - it is a simple webpack setup with TypeScript via ts-loader. It is essentially the minimum needed to render an Apollo Provider with a client with React & TypeScript. So I'm surprised no-one else has encountered/reported this issue yet! I have tested this and reproduced on multiple machines, and also had the exact same issue on every other project I've tried to use the latest @apollo/client on (All the projects have a similar set up of webpack + typescript).

git clone git@github.com:Billy-/apollo-client-test.git
cd apollo-client-test
npm i
npm run dev

Versions

  System:
    OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
  Binaries:
    Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
  Browsers:
    Chrome: 86.0.4240.183
    Firefox: 82.0.3
  npmPackages:
    @apollo/client: ^3.2.7 => 3.2.7 
  npmGlobalPackages:
    @apollo/client: 3.2.1

[benjamn]

@Billy- I very much share your surprise that the problems with source maps have not been reported by anyone else. Presumably everyone else just assumed we don't ship source maps and went on with their days. Anyway, that problem will be fixed in @apollo/client@3.2.8, which I will publish momentarily. Thanks for bringing that to our attention!

As for the Symbol(__APOLLO_CONTEXT__) problem, I was able to simplify the relevant code a bit in #7371, but I think you must have something misconfigured in your reproduction (possibly in webpack.config.js), because the react import in ApolloContext.ts is somehow getting resolved (by webpack) to @apollo/client/react/index.js instead of node_modules/react. I've double-checked that Apollo Client isn't doing anything that could affect the resolution logic, but I think you'll need to keep investigating the root cause on your end.

[HeyParkerJ]

Hey @benjamn - I'm actually having the same problem where the import * as React from 'react' line is importing @apollo/client/react/index.js instead of ReactJS, and is crashing on React.createContext. I'm performing a migration from Apollo v2 to v3 and my webpack setup worked fine before attempting this upgrade. Further, there is nothing in my webpack config that I believe would cause this -- I've never seen this issue before actually.

@Billy- resolve:

resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    modules: ['node_modules', '.'],
  },

My resolve:

  resolve: {
    extensions: ['.css', '.mjs', '.js', '.jsx'],
    modules: ['node_modules', 'client'],
  },

Do you have any recommendation for how to resolve this?

[HeyParkerJ]

I tried updating to @apollo/client@3.4.0-beta.2, seeing that you made changes to this import in #7371 and now React is undefined within that file, so I'm getting very similar errors after the attempted fixes.

Uncaught TypeError: Cannot read property 'createContext' of undefined
    at getApolloContext (ApolloContext.js:6)
    at ApolloProvider (ApolloProvider.js:6)
    at renderWithHooks (react-dom.development.js:14977)
    at mountIndeterminateComponent (react-dom.development.js:17803)
    at beginWork (react-dom.development.js:19041)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at HTMLUnknownElement.nrWrapper (class-profile:33)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23956)