"Unable to resolve module ./useInifinteQuery.cjs"

[SharonGilmore]

Describe the bug

I'm not sure whether this is a bug or just me doing something wrong. I have a React Native project (using React 18.2.0 and React Native 0.73.6) which also uses TypeScript (5.0.4). I've just added React Query ("@tanstack/react-query": "^5.56.2"), and attempted to create an infinite query like this:

import { useInfiniteQuery } from '@tanstack/react-query';

const ItemListScreen = () => {

  const baseUrl = *API URL*;

  const fetchItems = async ({ pageParam }: {pageParam: number}) => {
    const response = await client(baseUrl + `?page=${pageParam}`, 'GET');  // This just calls axios GET
    return response;
  };

  const {
    data,
    isLoading,
    isFetching,
    hasNextPage
  } = useInfiniteQuery({
    queryKey: ['items'],
    queryFn: fetchItems,
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextCursor});


  return <FlatList
                 data={data}
                 onEndReached={!isFetching && hasNextPage && fetchNextPage}
                 onEndReachedThreshold={0.8}
                 renderItem={({item}) => { return <RenderItem set={item} />;}}
                 ListFooterComponent={isLoading && <Spinner />}
        />
};

export default ItemListScreen;

When I try to run this (on Android - haven't tried iOS yet) I get the error
`Error: Unable to resolve module ./useInfiniteQuery.cjs from C:\PATH\TO\PROJECT\node_modules@tanstack\react-query\build\legacy\index.cjs:

None of these files exist:

• node_modules@tanstack\react-query\build\legacy\useInfiniteQuery.cjs(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• node_modules@tanstack\react-query\build\legacy\useInfiniteQuery.cjs\index(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  63 | var import_useMutationState = require("./useMutationState.cjs");
  64 | var import_useMutation = require("./useMutation.cjs");

65 | var import_useInfiniteQuery = require("./useInfiniteQuery.cjs");
| ^
66 | var import_isRestoring = require("./isRestoring.cjs");
67 | // Annotate the CommonJS export names for ESM import in node:
68 | 0 && (module.exports = {
at ModuleResolver.resolveDependency (C:\PATH\TO\PROJECT\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:112:15)
at DependencyGraph.resolveDependency (C:\PATH\TO\PROJECT\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)
at C:\PATH\TO\PROJECT\node_modules\metro\src\lib\transformHelpers.js:156:21
at resolveDependencies (C:\PATH\TO\PROJECT\node_modules\metro\src\DeltaBundler\buildSubgraph.js:42:25)
at visit (C:\PATH\TO\PROJECT\node_modules\metro\src\DeltaBundler\buildSubgraph.js:83:30)
at async Promise.all (index 0)
at async visit (C:\PATH\TO\PROJECT\node_modules\metro\src\DeltaBundler\buildSubgraph.js:92:5)
at async Promise.all (index 0)
at async buildSubgraph (C:\PATH\TO\PROJECT\node_modules\metro\src\DeltaBundler\buildSubgraph.js:103:3)
at async Graph._buildDelta (C:\PATH\TO\PROJECT\node_modules\metro\src\DeltaBundler\Graph.js:157:22)`

followed by a second error:

None of these files exist:
  * node_modules\@tanstack\react-query\build\legacy\useInfiniteQuery.cjs(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * node_modules\@tanstack\react-query\build\legacy\useInfiniteQuery.cjs\index(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  63 | var import_useMutationState = require("./useMutationState.cjs");
  64 | var import_useMutation = require("./useMutation.cjs");
> 65 | var import_useInfiniteQuery = require("./useInfiniteQuery.cjs");
     |                                        ^
  66 | var import_isRestoring = require("./isRestoring.cjs");
  67 | // Annotate the CommonJS export names for ESM import in node:
  68 | 0 && (module.exports = {]

I'm totally new to React Query, so I may well be doing something wrong, but I don't know where to start. I've provided a Snack below, but it seems to work ok there, so that doesn't really help.

Your minimal, reproducible example

https://snack.expo.dev/@sharongilmore/moody-blue-milkshake

Steps to reproduce

Run the code

Expected behavior

I expected it to show a blank screen

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 11 Pro
Android Emulator (API 33)

Tanstack Query adapter

react-query

TanStack Query version

v5.56.2

TypeScript version

5.0.4

Additional context

No response