Warning with @reduxjs/toolkit/query/react Is this an Expo or RTK issue?

[akeeee]

Describe the bug

When using Expo with @reduxjs/toolkit/query/react, I encounter the following warning:

warning: The package /node_modules/@reduxjs/toolkit/query/react contains an invalid package.json configuration. Consider raising this issue with the package maintainer(s). Reason: The target for "." defined in "exports" is "./../../dist/query/react/cjs/index.js", however this value is an invalid subpath or subpath pattern because it includes "..". Falling back to file-based resolution.

Questions

1. Should I be concerned about this warning?
2. Is this issue related to the configuration of Redux Toolkit (RTK) or something specific to Expo?

[markerikson]

Hmm. That could mean we need to tweak the nested package.json file. Thing is, that file is a backup and shouldn't actually be necessary in the first place - the intended behavior is that a bundler should only be looking at the root package.json, where the various exports are defined in the first place.

What version of the Metro bundler are you using?

Does the app build and run overall?

[aryaemami59]

What version of Expo and React-Native are you using? What version of @reduxjs/toolkit are you using? What does your metro.config.js look like?

[akeeee]

What version of the Metro bundler are you using?

Does the app build and run overall?

Thank you @markerikson for the explanation. I am using the default Metro bundler version provided by Expo. I did not install Metro bundler manually, so I'm not sure of the exact version. Yes, the app runs successfully overall.

What version of Expo and React-Native are you using? What version of @reduxjs/toolkit are you using? What does your metro.config.js look like?

Expo: ~51.0.22 React-native: 0.74.3 @reduxjs/toolkit: 2.2.6 I haven't made any customizations to the Metro bundler configuration.

This is my package.json

{
  "name": "demo-frontend",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/native": "^6.0.2",
    "@reduxjs/toolkit": "^2.2.6",
    "expo": "~51.0.22",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.9",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.18",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.3",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10",
    "react-redux": "^9.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
  "private": true
}

[aryaemami59]

@akeeee Are you using a monorepo of some kind? And what command do you run before you get the warning? Is it just npm start?

[akeeee]

@aryaemami59 No, I just install Expo (npx create-expo-app@latest) and set up the store. You can check the repository here: https://github.com/akeeee/reduxjs-warning. You can run with npm run web to see the warning.

[aryaemami59]

@akeeee Thanks for the repro, I'll take a look. I did some digging earlier it looks like the package.json files we have to satisfy Node10 module resolution are incompatible with the new unstable_enablePackageExports of React Native and Metro because for some reason Metro doesn't like having .. in subpath exports. I'm gonna look at your repro to get some confirmation.

[akeeee]

@aryaemami59 Thank you for your time. I use node v20.9.0 btw.

[aryaemami59]

@akeeee Awesome, thanks I'll take a look.

[aryaemami59]

Alright I did some more digging and I think I might have a solution for this. If the only reason we kept the nested package.json files is to make TypeScript's Node10 module resolution happy, then we can simply remove them and replace them with typesVersions field in package.json. For reference, currently we are using the package-json-redirects strategy for Node10 and we could simply switch to using the types-versions strategy. So it would need to look something like this:

  "typesVersions": {
    "*": {
      "react": [
        "./dist/react/index.d.ts"
      ],
      "query": [
        "./dist/query/index.d.ts"
      ],
      "query/react": [
        "./dist/query/react/index.d.ts"
      ]
    }
  },

I tried this already, it seems to work on TypeScript's side of things. The warning goes away in the provided repro and it passes the are-the-types-wrong tests. I did actually take it one step further, I noticed the React-Redux package has an alternate-renderers entry-point that used to fail the are-the-types-wrong tests for Node10 so I used the same typesVersions field in package.json which made the tests pass so this might actually be a feasible solution long-term. It does seem weird to me that the metro-resolver looks at query/react/package.json first before looking at the exports field of the main package.json file.

[markerikson]

FWIW, those nested package.json files are really there for any build tool that doesn't know about package.exports, such as Webpack 4 or all versions of Metro up to the most recent ones (0.72?). So, it's not just TS, and I don't think we can remove those.

[aryaemami59]

ahhh, I see. I'm going to look into this a bit more but I think the main issue is that the metro-resolver looks at the exports field of the nested package.json files. And since part of the reason why we had the nested package.jsons was for bundlers that do not support the exports field, then I think we might be able to resolve this by simply getting rid of the exports field inside the nested package.json files. That way legacy bundlers stay happy, TypeScript Node10 stays happy and React-Native, Expo and metro-resolver will be happy.

[hookFang]

I had a similar issue, I upgraded to latest expo SDK v51, I had to delete my metro.config.json file in the project and then once you start the app it will properly handle the situation.

[jrjacobs24]

@aryaemami59 Hey there. Has there been any further investigation into this issue? We're going through the process of updating to RTK v2, and I'm experiencing the same warnings as the OP. We have the unstable_enablePackageExports config set to true. Let me know if any additional info would be helpful. Thanks in advance.

warning: The package /node_modules/@reduxjs/toolkit/query contains an invalid package.json configuration. Consider raising this issue with the package maintainer(s).
Reason: The target for "." defined in "exports" is "./../dist/query/rtk-query.modern.mjs", however this value is an invalid subpath or subpath pattern because it includes "..". Falling back to file-based resolution.

Node: 18.5.0 Expo: 49.0.21 metro-resolver: 0.72.4 React: 18.2.0 React-native: 0.72.7 @reduxjs/toolkit: 2.2.7

[aryaemami59]

@jrjacobs24 No, sorry I kind of lost track of this, I'll take another look today.