react-native-maps: Getting error 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

Bug report

Getting error in loading maps on expo

<homeDirectory>/reactNativeLearning/tracks/node_modules/react-native-maps/lib/components/MapView.js Attempted import error: ‘requireNativeComponent’ is not exported from ‘react-native-web/dist/index’.

Environment info

react-native info output:

info Fetching system and libraries information...
System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
    Memory: 225.72 MB / 7.69 GB
    Shell: 5.0.16 - /bin/bash
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.4 - /usr/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: Not Found
    Python: 2.7.18 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: ~16.9.0 => 16.9.0 
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: x.x.x

Steps to reproduce

Added the package using npm install react-native-maps
Added a js file and imported the MapView using import MapView from "react-native-maps";
ran the server using npm start - expo server started
Error in the console: /home/sunil/myWork/reactNativeLearning/tracks/node_modules/react-native-maps/lib/components/MapView.js Attempted import error: ‘requireNativeComponent’ is not exported from ‘react-native-web/dist/index’.

/home/sunil/myWork/reactNativeLearning/tracks/node_modules/react-native-maps/lib/components/MapView.js Attempted import error: ‘requireNativeComponent’ is not exported from ‘react-native-web/dist/index’.

/home/sunil/myWork/reactNativeLearning/tracks/node_modules/react-native-maps/lib/components/decorateMapComponent.js Attempted import error: ‘requireNativeComponent’ is not exported from ‘react-native-web/dist/index’.

Map should be displayed
…

Reproducible sample code

import React from “react”; import { View, Text, StyleSheet } from “react-native”; import MapView from “react-native-maps”;

const Map = () => { return ( <View> <MapView style={styles.map} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} /> </View> ); };

const styles = StyleSheet.create({ map: { height: 300, }, });

export default Map;

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 23

Most upvoted comments

Is anyone looking at this issue of resolving?

sunilkhuwal on Feb 4, 2021

So i am trying to make an app that runs as a mobile app, but also i want to reuse as much of the code as possible for a web app. I was looking at doing PWA. But i thought maybe i could react-native map also in web? i am getting a similar error.
TypeError: Cannot read property 'style' of undefined 
  81 |  * Used to style and layout the `MapView`.  See `StyleSheet.js` and
  82 |  * `ViewStylePropTypes.js` for more info.
  83 |  */
> 84 | style: viewPropTypes.style,
     | ^  85 | 
  86 | /**
  87 |  * A json object that describes the style of the map. This is transformed to a string
Is this even possible to do? or should i just try and do a PWA.

Same issue here. Just adding import MapView from react-native-maps crashes things. Even if I don’t use it

DeveloperAlly on Sep 30, 2020

I couldn’t run it under the web either using

expo install react-native-maps

or in any other way. But, after all, everything worked out.

Install react-native-web-maps

npm i react-native-web-maps -P

If you haven’t added web.config.js and index.html - you need to add them

expo customize:web

Edit index.html. Add line

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_GOOGLE_API_KEY>"></script>

Edit webpack.config.js. Add two lines

config.resolve.alias['react-native'] = 'react-native-web';
config.resolve.alias['react-native-maps'] = 'react-native-web-maps';

In other words, for Android and iOs, react-native-maps will be used as before, and for web react-native-web-maps.

upd. But, unfortunately, react-native-web-maps can’t do almost anything. Minimal functionality - map and markers.

petrovi4 on Nov 7, 2020

use: expo install react-native-maps

nghia140140 on Aug 6, 2020

any update on this one?

reyanshmishra on Apr 14, 2021

When I do expo install react-native-maps I get

Installing 1 SDK 44.0.0 compatible native module using npm.
> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-dom@17.0.2
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!   peer react@"^16.8 || ^17 || ^18" from @react-google-maps/api@2.12.0
npm ERR!   node_modules/@react-google-maps/api
npm ERR!     @react-google-maps/api@"^2.7.0" from the root project
npm ERR!   22 more (@react-navigation/core, @react-navigation/elements, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.2" from react-dom@17.0.2
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^17.0.1" from the root project
npm ERR!   peer react-dom@"^16.8 || ^17 || ^18" from @react-google-maps/api@2.12.0
npm ERR!   node_modules/@react-google-maps/api
npm ERR!     @react-google-maps/api@"^2.7.0" from the root project
npm ERR!   1 more (react-native-web)
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"17.0.2" from react-dom@17.0.2
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"^17.0.1" from the root project
npm ERR!     peer react-dom@"^16.8 || ^17 || ^18" from @react-google-maps/api@2.12.0
npm ERR!     node_modules/@react-google-maps/api
npm ERR!       @react-google-maps/api@"^2.7.0" from the root project
npm ERR!     1 more (react-native-web)
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/seven/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/seven/.npm/_logs/2022-07-14T13_57_25_465Z-debug-0.log

npm exited with non-zero code: 1
Error: npm exited with non-zero code: 1
    at ChildProcess.completionListener (/Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/@expo/spawn-async/src/spawnAsync.ts:65:13)
    at Object.onceWrapper (node:events:646:26)
    at ChildProcess.emit (node:events:526:28)
    at maybeClose (node:internal/child_process:1092:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
    ...
    at spawnAsync (/Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/@expo/spawn-async/src/spawnAsync.ts:26:19)
    at NpmPackageManager._runAsync (/Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/@expo/package-manager/src/NodePackageManagers.ts:166:31)
    at NpmPackageManager.installAsync (/Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/@expo/package-manager/src/NodePackageManagers.ts:82:16)
    at NpmPackageManager.addWithParametersAsync (/Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/node_modules/@expo/package-manager/src/NodePackageManagers.ts:96:18)
    at actionAsync (/Users/seven/.nvs/node/16.14.2/x64/lib/node_modules/expo-cli/src/commands/installAsync.ts:141:3)

what should I do with that? what exactly is it conflicting with ?

dziekonskik on Jul 14, 2022

So i am trying to make an app that runs as a mobile app, but also i want to reuse as much of the code as possible for a web app. I was looking at doing PWA. But i thought maybe i could react-native map also in web? i am getting a similar error.

TypeError: Cannot read property 'style' of undefined 
  81 |  * Used to style and layout the `MapView`.  See `StyleSheet.js` and
  82 |  * `ViewStylePropTypes.js` for more info.
  83 |  */
> 84 | style: viewPropTypes.style,
     | ^  85 | 
  86 | /**
  87 |  * A json object that describes the style of the map. This is transformed to a string

Is this even possible to do? or should i just try and do a PWA.

Agent215 on Sep 28, 2020

use: expo install react-native-maps

Thank you, this did the trick and I now understand why I should install via expo. Solved for my part!

EmilGus on Aug 7, 2020