Description
We use this library with Webpack for our web builds and it works fine, but we've been struggling to get it working with the new Metro web bundler.
Since Expo are forcing everyone to switch to their Metro builder for web, we've been migrating over to that. They also force devs to now switch to expo-router over react-navigation. I've added the following to my +html.jsx file as Expo recommends:
import { ScrollViewStyleReset } from 'expo-router/html';
import PropTypes from 'prop-types';
import { GOOGLE_MAPS_API_KEY_WEB } from '@env';
/**
* This file is web-only and used to configure the root HTML for every web page during static rendering.
* The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
*/
const WebAppWrapper = ({ children }) => (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
{/*
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
*/}
<ScrollViewStyleReset />
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
{/* Add any additional <head> elements that you want globally available on web... */}
{/* This is where we're adding our google api script */}
<script
async
defer
src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY_WEB}`}
></script>
</head>
<body>{children}</body>
</html>
);
WebAppWrapper.propTypes = {
children: PropTypes.node.isRequired
};
const responsiveBackground = `
body {
background-color: #fff;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
}
}`;
export default WebAppWrapper;The script get's loaded with the correct key, but we get the following error when rendering react-native-web-maps:
Since we're not using webpack anymore, we can't use their resolve aliases anymore with:
config.resolve.alias['react-native-maps'] = 'react-native-web-maps';
So we've ended up making a Map.jsx and a Map.native.jsx component. The one uses
// Map.native.jsx
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
And the other uses:
// Map.jsx
import MapView from 'react-native-web-maps';
Is there anything we're missing? Should this library work with the new Expo Metro builder for web?