Jotai <Provider /> breaks on React Native when unstable_enablePackageExports enabled

[Armster15]

Hello, and thank you for Jotai! It has easily become my favorite state management library in React.

A while-ish back, React Native added beta support for the exports field in package.json. Currently, this is not on by default: you have to manually enable this feature by editing metro.config.js and enabling the unstable_enablePackageExports setting. Something like this:

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

// See https://reactnative.dev/blog/2023/06/21/0.72-metro-package-exports-symlinks#package-exports-support-beta
config.resolver.unstable_enablePackageExports = true;

module.exports = config;

A note that although this feature is currently unstable, React Native does plan to make this the default soon.

Unfortunately, when you try using a Jotai <Provider /> when you have this setting on, it breaks. This is the stack trace:

 ERROR  SyntaxError: 136137:10:'import.meta' is currently unsupported

This error is located at:
    in Provider (at App.js:7)
    in App (at withDevTools.ios.js:25)
    in withDevTools(App) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes
Error: ENOENT: no such file or directory, open '/Users/XX/Desktop/jotai-react-native-reproducible/unknown'
    at Object.readFileUtf8 (node:internal/fs/sync:25:18)
    at Object.readFileSync (node:fs:441:19)
    at getCodeFrame (/Users/XX/Desktop/jotai-react-native-reproducible/node_modules/metro/src/Server.js:868:18)
    at Server._symbolicate (/Users/XX/Desktop/jotai-react-native-reproducible/node_modules/metro/src/Server.js:945:22)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Server._processRequest (/Users/XX/Desktop/jotai-react-native-reproducible/node_modules/metro/src/Server.js:394:7) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/XX/Desktop/jotai-react-native-reproducible/unknown'
}

The React Native docs include a way to debug the resolution changes that occur after enabling unstable_enablePackageExports. The diff is the following:

< /Users/XX/Desktop/jotai-react-native-reproducible/node_modules/jotai/index.js
< /Users/XX/Desktop/jotai-react-native-reproducible/node_modules/jotai/vanilla.js
< /Users/XX/Desktop/jotai-react-native-reproducible/node_modules/jotai/react.js
---
> /Users/XX/Desktop/jotai-react-native-reproducible/node_modules/jotai/esm/index.mjs
> /Users/XX/Desktop/jotai-react-native-reproducible/node_modules/jotai/esm/vanilla.mjs
> /Users/XX/Desktop/jotai-react-native-reproducible/node_modules/jotai/esm/react.mjs

I am not very knowledgeable in this realm of CJS/ESM stuff so forgive me if I'm wrong for the following:

• My guess is that it's not working because it's using the ESM build instead of the CJS build
• One potential solution is that since React Native introduced a "react-native" community condition for the exports field, maybe the library could directly set it to the CJS build
  These are just guesses/ideas. I'm sure the maintainers will have a much clearer idea on what to do.

I have also created a minimal reproducible available at https://github.com/Armster15/jotai-react-native-reproducible.
To toggle the setting, edit the metro.config.js file. I have also included the resolution change debug logs in the metro-resolution-changes-logs folder. To run the reproducible, simply npm install and npm run start.

Thank you so much!

[dai-shi]

ERROR SyntaxError: 136137:10:'import.meta' is currently unsupported

I would expect they support it before making it stable.
If that's not the case, we need to consider adding react-native condition, but this isn't just about jotai, and zustand and valtio also suffer from it (ironically, we will drop some condition in the next major.) I don't think it's just three libs of ours. There should be many libs that use import.meta. So, I really hope that they support import.meta soon.

[jacargentina]

Maybe my findings help

pmndrs/zustand#1967 (reply in thread)

I'm not using jotai but zustand with an Expo (RN) app.

Cheers!