TypeError: dispatcher.useSyncExternalStore is not a function.

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"