TypeError: dispatcher.useSyncExternalStore is not a function.

[kenchoong]

Describe the bug

I hit this error:

TypeError: dispatcher.useSyncExternalStore is not a function. (In 'dispatcher.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)', 'dispatcher.useSyncExternalStore' is undefined)

What I have done:

// set up the react query hooks 
export const articlesToday = (
  params?: ArticlesTodayParams,
  signal?: AbortSignal
) => {
      return apiInstance<Article[]>(
      {url: `/articles/today/`, method: 'get', signal,
        params,
    },
      );
    }
  

export const getArticlesTodayQueryKey = (params?: ArticlesTodayParams,) => [`/articles/today/`, ...(params ? [params]: [])];

    
export type ArticlesTodayQueryResult = NonNullable<Awaited<ReturnType<typeof articlesToday>>>
export type ArticlesTodayQueryError = unknown

export const useArticlesToday = <TData = Awaited<ReturnType<typeof articlesToday>>, TError = unknown>(
 params?: ArticlesTodayParams, options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof articlesToday>>, TError, TData>, }

  ):  UseQueryResult<TData, TError> & { queryKey: QueryKey } => {

  const {query: queryOptions} = options ?? {}

  const queryKey = queryOptions?.queryKey ?? getArticlesTodayQueryKey(params);

  

  const queryFn: QueryFunction<Awaited<ReturnType<typeof articlesToday>>> = ({ signal }) => articlesToday(params, signal);

  const query = useQuery<Awaited<ReturnType<typeof articlesToday>>, TError, TData>(queryKey, queryFn, queryOptions)

  return {
    queryKey,
    ...query
  }
}

// Wrap the app with QueryProvider 
const App = () => {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      <Provider>
        <CustomerAppNavigation />
      </Provider>
    </QueryClientProvider>
  );
};

export default App;

// Then inside the component using the hook like this

export interface ScreenProps {}

export function Screen(props: ScreenProps) {

   const { data } = useArticlesToday({ title: '123', ordering: '-created_at' });

    console.log(data);

   return (
            <Text key={article.uuid}>
              {`title = ${article.title}`}
            </Text>
   );
}

Above is my setup, then when I test the app by going to Screen in iOS and Android, I get this error

TypeError: dispatcher.useSyncExternalStore is not a function. (In 'dispatcher.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)', 'dispatcher.useSyncExternalStore' is undefined)

Here is the call stack I got in Expo Go.

It is cause by useSyncExternalStore and useBaseQuery which is from react-query package.

To solve this, I have read this issues https://github.com/TanStack/query/issues/3582, I at first in latest "react-query": "4.0.0-beta.24", Then I tried, beta.7, beta.10, beta.1 (as mention in the issue above) All having the same error.

Your minimal, reproducible example

n/a

Steps to reproduce

• yarn add react-query@beta
• Follow the minumum code example above.
• Open in Expo Go

Note: no need a real API for this, the app just hitting the error once the Screen open.

Expected behavior

• Hit the Screen
• Will call API to URL
• Will get result back from axios.data with `Article data inside

How often does this bug happen?

No response

Screenshots or Videos

Platform

• Expo Go
• React native
• Android and iOS both hitting the same error

react-query version

v4.0.0-beta.1, v4.0.0-beta.7, v4.0.0-beta.10, v4.0.0-beta.24

TypeScript version

~4.7.2

Additional context

The same setup Screen above running in Nextjs, having no problem, means that the behavior same exactly like the Expected behavior below

I am using

    "@expo/metro-config": "0.3.17",
    "@nrwl/next": "14.4.2",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "axios": "^0.27.2",
    "core-js": "^3.6.5",
    "expo": "45.0.6",
    "expo-dev-client": "~1.0.0",
    "expo-linking": "~3.1.0",
    "expo-splash-screen": "0.15.1",
    "expo-status-bar": "~1.3.0",
    "expo-structured-headers": "~2.2.1",
    "expo-updates": "~0.13.2",
    "native-base": "^3.4.9",
    "next": "12.1.6",
    "orval": "^6.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-reanimated": "~2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-svg": "12.3.0",
    "react-native-svg-transformer": "1.0.0",
    "react-native-web": "0.17.7",
    "react-query": "4.0.0-beta.1",
    "regenerator-runtime": "0.13.7",
    "solito": "^0.0.26",
    "tslib": "^2.3.0"

[joealden]

Could you please try updating your react-native dependency to 0.69.0+? This being because 0.69 is the 1st version to properly support React 18, so the fact that you are depending on React 18 deps when on 0.68 is likely a problem.

[TkDodo]

react-query version v4.0.0-beta.1, v4.0.0-beta.7, v4.0.0-beta.10, v4.0.0-beta.24

plase try with @tanstack/[email protected]

[kenchoong]

plase try with @tanstack/[email protected]

Unable to install @tanstack/[email protected]

• run yarn add @tanstack/[email protected]
• get this

[kenchoong]

Could you please try updating your react-native dependency to 0.69.0+? This being because 0.69 is the 1st version to properly support React 18, so the fact that you are depending on React 18 deps when on 0.68 is likely a problem.

@joealden I unable to do this too, due to Expo sdk version

Warning: Invalid version [email protected] for expo sdkVersion 45.0.0. Use [email protected]

Latest expo sdk is version 45

I done this anyway,

"react-native": "0.69.1"
 "react-query": "4.0.0-beta.23",

get the warning, but the app work, can start, no crash at the same time, I can confirm that this error:

TypeError: dispatcher.useSyncExternalStore is not a function. (In 'dispatcher.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)', 'dispatcher.useSyncExternalStore' is undefined)

is not shown anymore in 0.69.1

but 0.68.2 will occurred the error

[joealden]

@kenchoong to give some more context on why the error occurs, it'll be because v4 makes use of the useSyncExternalStore hook that was introduced in React 18, but (I believe) does so in a way where it keeps compatibility with react versions prior to 18 by detecting it's existence in what react exports. Because you are depending on a react version that has the new hook exported, the compatibility check mentioned above succeeds, so it presumes that useSyncExternalStore can be used.

However, as you are depending on a react-native version that does not support React 18, the renderer doesn't support the new hook under the hood. It's like depending on [email protected] as well as [email protected] - it just isn't a supported case.

And while I understand that the current expo SDK version doesn't yet officially support [email protected], this isn't a problem with this library, it's a problem with your dependencies. So I think the real solution is to downgrade your react deps to 17.x.x until expo supports [email protected]+, but you could ignore the expo warning if you wanted to (but that may have other unforeseen problems).

[kenchoong]

@joealden Thanks

I think for now I will stick with

"react": "18.2.0",
"react-native": "0.69.1",
 "react-query": "4.0.0-beta.23",

Because when I downgrade to react 17.0.2, it causing problem for me in Nextjs in another library.

The version above is good for me for now

[kenchoong]

Nice, even better https://blog.expo.dev/expo-sdk-46-c2a1655f63f7 Expo SDK 46 is up. It use React 18 and React Native 0.69.3 This is what we want to solve this problem

[TkDodo]

gonna close this for as I don't think there is something we can or need to do.

[pavankwebelight]

I got the same error when using the "useSyncExternalStore" hook in React Native.

I have tried to solve the issue for React Native. I only change versions of React and React native both as below. After that, the error was gone!

"react": "18.2.0", "react-native": " 0.70"