Compatibility with Expo and `web`

[uzaymacar]

Great project, thanks for making it available -- I couldn't find any other RN libraries that provide such full functionality.

I installed the package as shown in the README (including changes to metro.config.js), but

• when running npx expo start -c with web I run into the following error:

Unable to resolve "react-async-hook" from "node_modules/react-native-international-phone-number/node_modules/react-native-country-picker-modal/lib/Flag.js"

• when running eas update --auto for Expo EAS updates I run into the following error:

[expo-cli] Error: While trying to resolve module `react-async-hook` from file `/Users/uzaymacar/Projects/<PROJECT_NAME>/node_modules/react-native-international-phone-number/node_modules/react-native-country-picker-modal/lib/Flag.js`, the package `/Users/uzaymacar/Projects/<PROJECT_NAME>/node_modules/react-native-international-phone-number/node_modules/react-async-hook/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/uzaymacar/Projects/<PROJECT_NAME>/node_modules/react-native-international-phone-number/node_modules/react-async-hook/react-async-hook.esm.js`. Indeed, none of these files exist:

[expo-cli]   * /Users/uzaymacar/Projects/<PROJECT_NAME>/node_modules/react-native-international-phone-number/node_modules/react-async-hook/react-async-hook.esm.js(.web.jsx|.jsx|.web.js|.js|.web.ts|.ts|.web.tsx|.tsx|.web.cjs|.cjs|.web.json|.json)
[expo-cli]   * /Users/uzaymacar/Projects/<PROJECT_NAME>/node_modules/react-native-international-phone-number/node_modules/react-async-hook/react-async-hook.esm.js/index(.web.jsx|.jsx|.web.js|.js|.web.ts|.ts|.web.tsx|.tsx|.web.cjs|.cjs|.web.json|.json)

Any ideas how to solve this?

[AstrOOnauta]

Hello @uzaymacar Thanks for your considerations. Glad to help the community in some way...

So...

I tried to simulate your problem, but I couldn't.

Below is the step by step of my simulation:

I started an expo bare workflow project (npx create-expo-app --template bare-minimum) and just installed the lib react-native-international-phone-number (npm i react-native-international-phone-number). I did the following tests:

• First I run the npx expo start -c command and the app worked normally (print 1);
• Second I tested with the command you used (npx expo start -c --web) and it worked fine (print 2) - before I needed to install dependencies to support the web version (https://docs.expo.dev/workflow/web/).

Unfortunately I couldn't replicate your problem. I leave below the package.json data and the versions of the frameworks/libs used:

{ { "name": "my-app", "version": "1.0.0", "main": "index.js", "scripts": { "start": "expo start --dev-client", "android": "expo run:android", "ios": "expo run:ios", "expo run:ios", "web": "expo start --web" }, "dependencies": { "expo": "48.0.18", "expo-splash-screen": "0.18.2", "expo-status-bar": "1.4.4", "react": "18.2.0", "react-native": "0.71.8", "react-native-international-phone-number": "0.4.6", "@expo/webpack-config": "18.0.1", "react-dom": "18.2.0", "react-native-web": "0.18.10" }, "devDependencies": { "@babel/core": "7.20.0" }, "private": true }

[uzaymacar]

Thanks for your quick response and analysis @AstrOOnauta! It helps to know that the problem is with my setup -- I'll try replicate your config and get back to you if the issue persists.

[AstrOOnauta]

You're welcome, @uzaymacar!

If you to discover the cause of the problem...please, share its with us for future users with same issue ;)

[GibbyBox]

I ended up having this issue.

The end cause is likely because react-async-hook isn't downloaded to version 4.0.0 on your machine. You can confirm this with yarn/npm why react-async-hook. You likely have it at 3.6.1

There was an issue in previous versions where it incorrectly told the package manager the code for react-async-hook was at it's root folder as opposed to it's dist folder.

You can either patch react-async-hook to fix the location

-  "module": "react-async-hook.esm.js",
+  "module": "dist/react-async-hook.esm.js",

or add a yarn resolution / npm override for that package to v4.0.0

yarn

"resolutions": {
  "react-async-hook": "4.0.0"
}

npm

"overrides": {
  "react-async-hook": "4.0.0"
}