using with Expo Web with Metro bundler

[michjea]

Hi, I wanted to know if it is possible to use this package with Expo Web with Metro bundler instead of Webpack. Thanks :)

[sreuter]

I might be misreading this but maybe a combination of conditionsByPlatform and resolveRequest could potentially work.

Alternatively maybe we can just create your own maps.tsx and maps.web.tsx and import react-native-maps / react-native-maps-web respectively.

[michjea]

Thanks for the quick response :) I'm not sure I fully understand the doc, I'm a complete newbie to React (Native, Expo etc.).

For now I changed my metro.config.js file like this :

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);
const path = require('path');

config.resolver.unstable_enablePackageExports = true;
config.resolver.unstable_conditionsByPlatform = {
    web: ['browser'],
};

config.resolver.resolveRequest = (context, moduleName, platform) => {
    if (platform === 'web' && moduleName === 'react-native-maps') {
        return {
            filePath: path.resolve(__dirname, 'node_modules/@teovilla/react-native-maps-web'),
            type: 'sourceFile',
        };
    }
    return context.resolve(context, moduleName, platform);
};

module.exports = config;

but I've got a lot of these warnings (for like every module) :

warning: Attempted to import the module "mysuperpath\node_modules\@babel\runtime\helpers\interopRequireDefault" which is listed in the "exports" of "mysuperpath\node_modules\@babel\runtime, however no match was resolved for thisrequest (platform = web). Falling back to file-based resolution. Consider updating the call site or 
asking the package maintainer(s) to expose this API.

I can run the app but no map is displayed, and no other error or warning. Not sure what I'm doing right or wrong

[teovillanueva]

Hey! Sorry for the delay. I really haven't tried metro for web. I guess maybe a simple solution would be creating a maps.tsx and maps.web.tsx as @sreuter mentioned. It should look something like this.

// maps.tsx
export * from "react-native-maps"

// maps.web.tsx
export * from "@teovilla/react-native-web-maps"

and then importing like this

// my-component.tsx
import { MapView } from "./maps"

let me know if this works

[michjea]

Hi, thanks for your response :)

If I export everything from the library like you mentioned, I get an error :

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.

Check the render method of `Map`.

The solution I found is to first import and then export only the components I need like this :

// mymap.js
import MapView  from 'react-native-maps';
export default MapView;

// mymap.web.js
import MapView from "@teovilla/react-native-web-maps";
export default MapView;

I think it may be useful to add this to the doc, for other newbies like me haha :)