search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.77k stars 2.93k forks source link

"Unable to resolve module ./useInifinteQuery.cjs" #8070

Closed SharonGilmore closed 1 month ago

SharonGilmore commented 2 months ago

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:

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 commented 1 month ago

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

TkDodo commented 1 month ago

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:

https://github.com/TanStack/query/blob/763abd1628c09a7c7513e55cb30e64041ea1ac8d/packages/react-query/package.json#L37

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:

https://github.com/TanStack/query/blob/763abd1628c09a7c7513e55cb30e64041ea1ac8d/packages/react-query/package.json#L38

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 commented 1 month ago

okay seems like you’re using metro:

this was fixed:

and there’s a workaround: