Unable to import jotai-devtools within an expo + react native app about jotai-devtools HOT 2 CLOSED

Root cause: Metro — expo's bundler is unable to resolve the multi-entry node module paths using exports field correctly (most probably due to jotai-devtools's ./dist?).

Ideally this should be fixed by turning on the unstable_enablePackageExports option but I couldn't make it work using config.resolver.unstable_enablePackageExports = true so I'd suggest filing an issue with Metro and getting their recommendation as well.

Here are a few fixes I could think of.

Fix 1 (recommended)

Expo users would resolve the path (jotai-devtools/utils) manually by configuring metro.config.js. Retains type safety for jotai-devtools/utils.

// metro.config.js
const path = require('path');
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.resolveRequest = (context, moduleName, platform) => {
    if (moduleName === 'jotai-devtools/utils') {
        return {
            filePath: path.resolve(__dirname, 'node_modules/jotai-devtools/dist/utils.cjs.js'),
            type: 'sourceFile',
        };
    }

    return context.resolveRequest(context, moduleName, platform);
}
module.exports = config

Fix 2 (requires further investigation)

We add react-native field to jotai-devtools's package.json file to help metro resolve modules correctly.
The caveat is that it only supports a string value.

Add this in jotai-devtools/package.json

"react-native": "./dist/utils.cjs.js"

Outstanding questions

• How do we export the correct types i.e. ./dist/utils.d.ts for react-native property?
• How do we add support for ESM? Does Metro support it?

I'm not a React-native expert by any means 😅 so it'd be great if someone could help me test if the hooks under jotai-devtools/utils work as expected 🙏

from jotai-devtools.

Closing this as we have a good workaround for now. Happy to re-open if the issue persists.

from jotai-devtools.