TypeError: dispatcher.useSyncExternalStore is not a function

Help
,
1

Hi all,

I think I’m going crazy, because I’ve been trying to debug this issue with the apollo client for ~an hour, and I can’t figure out what’s causing this error. When using react 18, I get this message when building:


<small>This error happened while generating the page. Any console logs will be displayed in the terminal window.</small>

##### Source

###### Object.useSyncExternalStore

./node_modules/react/cjs/react.development.js (1674:21)

###### InternalState.useQuery

./node_modules/@apollo/client/react/hooks/hooks.cjs (70:31)

###### Object.useQuery
./node_modules/@apollo/client/react/hooks/hooks.cjs (28:69)

I assume it’s some sort of issue with React-18 compatibility?

Here’s the code

  469 | ) {
  470 |   const options = { ...defaultOptions, ...baseOptions }
> 471 |   return Apollo.useQuery<GetPostsQuery, GetPostsQueryVariables>(
      |         ^
  472 |     GetPostsDocument,
  473 |     options
  474 |   )

Let me know if I need to add anything else to this post to make it semi-useful :slight_smile:

Thanks!

2

I had this issue recently - I was using react-hot-loader and hot-loader/react-dom. The hot loader in Webpack was using an old version of react-dom (v17) which doesn’t have the new useSyncExternalStorage hook.

I had to remove react-hot-loader and hot-loader/react-dom, and remove all references in my Webpack config, to get Apollo Client to work.