Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
akeeee opened this issue Jul 23, 2024 · 14 comments
Open

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

akeeee opened this issue Jul 23, 2024 · 14 comments

Comments

@akeeee
Copy link

akeeee commented Jul 23, 2024

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
Copy link
Collaborator

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
Copy link
Contributor

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
Copy link
Author

akeeee commented Jul 24, 2024

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
Copy link
Contributor

@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
Copy link
Author

akeeee commented Jul 25, 2024

@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
Copy link
Contributor

@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
Copy link
Author

akeeee commented Jul 25, 2024

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

@aryaemami59
Copy link
Contributor

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

@aryaemami59
Copy link
Contributor

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
Copy link
Collaborator

markerikson commented Jul 25, 2024

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
Copy link
Contributor

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
Copy link

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
Copy link

@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
Copy link
Contributor

aryaemami59 commented Sep 16, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants