React Uncaught Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>

Question

I have a React app using react-apollo:2.5.8 and a library of custom components that I install via NPM and use within the app. The library has react-apollo:2.5.8 listed in peer and dev dependencies. Ever since I upgraded react-apollo to 2.5.8 I have been getting this error

`Uncaught Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>.`

I tried listing React-apollo within externals in the Webpack build for the library as well. This way only one installation is used, within the App. But no luck. Every time I try to import the components I keep getting this error. The components within the app are able to query successfully, it's the library components that throw this error.

Any suggestions on how I can fix this? I don't want to upgrade to ^3.0.0 as there are breaking changes and would involve a lot of refactoring. I am server side rendering the app as well, in which case it works perfectly fine, and I don't get this error. It's when I try to run the client only version that this error crops up.

Update: I can see that the library components still seem to be using their own react-apollo from it's node_modules folder. The module format is ejs, whereas in the app, the module format is the main option cjs. This is probably causing the error. I'll see if I can prevent the library components from using their own react-apollo package.

Answer 1

So I solved this by creating a symlink to the react-apollo package within my App from my library components folder. Since this was mainly a requirement for the dev environment, this seems to fix the problem. Not the best solution, but works for now.