Element type is invalid when including Marker

[Kutomore]

I'm trying to build an App right now using Expo, since react-native-maps does not include web support and they suggested in an issue people should try this out I wanted to give it a go.

Followed the steps and this works flawlesly as far as I can tell

import MapView, { Marker } from 'react-native-maps';
import { StyleSheet, View } from 'react-native';
import React from 'react';

export default function Map() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        showsUserLocation={true}
        customMapStyle={mapStyle}
        region={{
          latitude: 1,
          longitude: 1,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({...});

const mapStyle = [...];

But as soon as I include a Marker, like so:

<MapView
      style={styles.map}
      showsUserLocation={true}
      customMapStyle={mapStyle}
      region={{
        latitude: 1,
        longitude: 1,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      <Marker
        coordinate={{
          latitude: 1,
          longitude: 1,
        }}
      />
</MapView>

I get a bunch of errors in my console:

index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Map.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Couldn't figure out what's broken in this scenario, also can't find any other resource on using maps on web with react-native.

[CodingItWrong]

To fix this I had to access Marker as a property of the MapView object on the web. But on native I still needed to access it the old way. So instead of:

import MapView, { Marker } from 'react-native-maps';

I did:

import MapView, {Marker as NativeMarker} from 'react-native-maps';
import {Platform} from 'react-native';

const {Marker: WebMarker} = MapView;
const Marker = Platform.select({web: WebMarker, default: NativeMarker});

This worked for me on both native and web.