fix(deps): Add react-native field to package.json for Metro resolutions #8653

ajsmth · 2025-02-15T19:14:41Z

This PR adds the react-native field to other react-query packages. @tanstack/react-query includes this field, but it's internal dependencies (like query-core) do not - which breaks Metro module resolution in (some) contexts.

I'm surprised that seemingly no one else has encountered this - in our monorepo setup, this missing field led to some confusing runtime errors after upgrading from v4 to v5.

I validated this fixed the issue by manually applying the field to all relevant packages, however as a temporary workaround we've also manually resolved this in our metro.config.js :


// Custom resolve to handle exports in our package.json
config.resolver.resolveRequest = (ctx, moduleName, platform) => {
  if (moduleName === '@tanstack/query-core') {
    return {
      type: 'sourceFile',
      filePath: path.join(
        __dirname,
        `./node_modules/@tanstack/query-core/src/index.ts`
      ),
    }
  }

  if (moduleName === '@tanstack/query-sync-storage-persister') {
    return {
      type: 'sourceFile',
      filePath: path.join(
        __dirname,
        `./node_modules/@tanstack/query-sync-storage-persister/src/index.ts`
      ),
    }
  }

  if (moduleName === '@tanstack/react-query-persist-client') {
    return {
      type: 'sourceFile',
      filePath: path.join(
        __dirname,
        `./node_modules/@tanstack/react-query-persist-client/src/index.ts`
      ),
    }
  }

  if (moduleName === '@tanstack/query-persist-client-core') {
    return {
      type: 'sourceFile',
      filePath: path.join(
        __dirname,
        `./node_modules/@tanstack/query-persist-client-core/src/index.ts`
      ),
    }
  }

// ...rest
}

nx-cloud · 2025-02-16T09:54:34Z

View your CI Pipeline Execution ↗ for commit 2ed2138.

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	4m 36s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1m 55s	View ↗

☁️ Nx Cloud last updated this comment at 2025-02-16 09:59:56 UTC

pkg-pr-new · 2025-02-16T09:57:33Z

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8653

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@8653

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@8653

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8653

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@8653

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@8653

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@8653

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@8653

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@8653

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@8653

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@8653

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@8653

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@8653

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@8653

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@8653

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@8653

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@8653

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@8653

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@8653

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@8653

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@8653

commit: 2ed2138

codecov · 2025-02-16T10:00:09Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 63.06%. Comparing base (c807ee2) to head (2ed2138).
Report is 1 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #8653       +/-   ##
===========================================
+ Coverage   46.24%   63.06%   +16.82%     
===========================================
  Files         199      135       -64     
  Lines        7532     4822     -2710     
  Branches     1721     1350      -371     
===========================================
- Hits         3483     3041      -442     
+ Misses       3670     1549     -2121     
+ Partials      379      232      -147

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	`∅ <ø> (∅)`
@tanstack/angular-query-experimental	`88.65% <ø> (ø)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`43.85% <ø> (ø)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`94.16% <ø> (ø)`
@tanstack/query-devtools	`4.78% <ø> (ø)`
@tanstack/query-persist-client-core	`57.73% <ø> (ø)`
@tanstack/query-sync-storage-persister	`84.61% <ø> (ø)`
@tanstack/react-query	`95.95% <ø> (ø)`
@tanstack/react-query-devtools	`10.00% <ø> (ø)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`100.00% <ø> (ø)`
@tanstack/solid-query	`78.92% <ø> (+0.72%)`	⬆️
@tanstack/solid-query-devtools	`∅ <ø> (∅)`
@tanstack/solid-query-persist-client	`100.00% <ø> (ø)`
@tanstack/svelte-query	`87.33% <ø> (ø)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`100.00% <ø> (ø)`
@tanstack/vue-query	`71.01% <ø> (ø)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

fix(deps): Add react-native field to package.json for Metro resolutions

2ed2138

github-actions bot added package: react-query-persist-client package: query-core package: query-persist-client-core package: query-async-storage-persister package: query-sync-storage-persister labels Feb 15, 2025

TkDodo merged commit 5426e6c into TanStack:main Feb 16, 2025
6 of 7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(deps): Add react-native field to package.json for Metro resolutions #8653

fix(deps): Add react-native field to package.json for Metro resolutions #8653

ajsmth commented Feb 15, 2025 •

edited

Loading

nx-cloud bot commented Feb 16, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 16, 2025

codecov bot commented Feb 16, 2025 •

edited

Loading

fix(deps): Add react-native field to package.json for Metro resolutions #8653

fix(deps): Add react-native field to package.json for Metro resolutions #8653

Conversation

ajsmth commented Feb 15, 2025 • edited Loading

nx-cloud bot commented Feb 16, 2025 • edited Loading

pkg-pr-new bot commented Feb 16, 2025

codecov bot commented Feb 16, 2025 • edited Loading

Codecov Report

ajsmth commented Feb 15, 2025 •

edited

Loading

nx-cloud bot commented Feb 16, 2025 •

edited

Loading

codecov bot commented Feb 16, 2025 •

edited

Loading