"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

[bobbierule513]

Same Issue !!! have you got the solution to this problem as it is not consoling the pageParam it is always showing undefined

[TkDodo]

I also don’t know where to start because if the reproduction works, it’s likely a setup issue. We make special builds for “legacy” bundlers that don’t understand (or misinterpret) ESM.

Whatever bundler you are using, it picks up the legacy, commonJs build from the main package.json entry point:

query/packages/react-query/package.json

Line 37 in 763abd1

"main": "build/legacy/index.cjs",

node_modules@tanstack\react-query\build\legacy\useInfiniteQuery.cjs

but then, it seems to not understand the .cjs extension, because it tries to append every other possible extension:

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)

but not CJS. If the bundler were to understand a ESM, but not package.json exports, it would at least pick up the module entry, which is js:

query/packages/react-query/package.json

Line 38 in 763abd1

"module": "build/legacy/index.js",

all in all, maybe we are not compatible with react-native 0.73, I really don’t know. Please try upgrading to 0.75 or downgrade react-query to v4.

[TkDodo]

okay seems like you’re using metro:

this was fixed:

• Add .cjs and .mjs files support facebook/metro#535

and there’s a workaround:

• .cjs does not work with React Native and/or Expo thysultan/stylis#233 (comment)