Unable to resolve module react-native-web/dist/exports/DrawerLayoutAndroid from node_modules\react-native-gesture-handler\src\components\GestureComponents.tsx

[SinisaPluto]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the issue

"react-native-web": "^0.19.9",
"react-native-gesture-handler": "~2.12.0"

After running `expo start` and scanning the code I get the error

iOS Bundling failed Unable to resolve module react-native-web/dist/exports/DrawerLayoutAndroid from node_modules\react-native-gesture-handler\src\components\GestureComponents.tsx

Expected behavior

iOS bundle should succeed

Steps to reproduce

Setup expo project, install packages, run expo start, scan QR code on iPhone

Test case

Don't have

Additional comments

No response

[steveliles]

I'm having the same issue when bundling for iOS and Android, using the metro bundler with the alias and plugin in my babel config as described in the setup docs.

If I remove the babel plugin I instead have issues with finding native module "ExpoSplashScreen" (which I am using, and was working fine).

Removing both the plugin and the alias gets my build running again, and i can import the react-native-web components and use them and they seem to work, but presumably there's a good reason for having the alias in the setup and i'm going to run into issues further down the line ... ?

[steveliles]

@SinisaPluto I had previously had expo-router installed and it seems something in my node_modules had gone a bit monkey.

Just reinstalling babel-plugin-react-native-web didn't quite do it, but a full clean npm install has got me past the DrawerLayoutAndroid issue. I still have the ExpoSplashScreen issue on iOS, and now a "EXNativeModulesProxy" problem on Android, but I guess those are separate issues. Hope it helps.

[SinisaPluto]

@steveliles Thank you for the advice. I installed babel-plugin-react-native-web and it actually helped me :D But I now have the same error as you do "Cannot find native module 'ExpoSplashScreen", "Cannot read property 'getIosIdForVendorAsync' of undefined. If you have found the fix for these two please update me :D

[steveliles]

@SinisaPluto OK so it seems that depending on which route you take through the docs of the various projects you may end being misled about what setup you actually need.

It seems that expo does some magic if you have the "web" property in your app.json, so the setup described in react-native-web's docs is not needed (and in fact breaks things that "just work" if you leave them out).

In other words:

package.json should include react-native-web, but you don't need the babel-plugin-react-native-web babel.config.js should not have anything react-native-web specific in it. app.json should include the "web" property MyComponent.jsx should just import { View, Text, etc } from "react-native", which appears to be aliased behind the scenes by expo

... and your app should then work as expected in a browser.

It took me far too long to realise this because I was not expecting the hidden magic that expo is doing, and as a result I couldn't fathom how to get my components to use react-native-web properly when they already were!

[SinisaPluto]

@steveliles It works as expected in browser, but problem occurs when I want to test it on iOS or Android.

[laynef]

Still getting this

[necolas]

RNfW doesn't export platform-specific component stubs, you should use platform file forks that only bundle the import on native

https://necolas.github.io/react-native-web/docs/multi-platform/#web-specific-code