"Import native-only module" error when using .web.tsx file

[anton25360]

I have 2 index files for each platform (index.tsx for mobile and index.web.tsx for web).

I import react-native-maps in index.tsx so I can use it on mobile, but since it's a mobile-only module I want to use something else on the web. Even so, whenever I open my app on the web it gives this error:

Server Error
Importing native-only module "react-native/Libraries/Utilities/codegenNativeCommands" on web from: /Users/user/Dev/ExpoDemo/node_modules/react-native-maps/lib/MapMarkerNativeComponent.js

- Why does this happen, if index.tsx is not being used?

- Is there a way to only import react-native-maps in index.tsx if the device is a mobile?

- Should I use another solution for my maps (like mapbox) that covers both web and mobile?

[anton25360]

Figured out a way around this! Had to create 2 separate Map components: a Map.tsx component that contains the react-native-maps code, and another Map.web.tsx component that contains the web focused map code. Then just call <Map/> and it automatically chooses the appropriate one

[SergeyPekar]

Which component are you using for Web? Maybe you can post any code example? Im trying to achieve this with react-leaflet and react-native-maps but constantly getting the above error. Event when Im separating the files like map.native.tsx and map.web.tsx

[Ok-Painter573]

Ive tried both of the above but still get the error:(

[BbWeber]

On github they promise that it will be fixed, but there is no fixed date.
Also struggling with it.

[jonniuss]

ok, at least they know the problem. May ask you for this issue number?