chore(web): fix metro resolution to use index.web.js instead of index…

… when resolving the js version of @rnmapbox/maps, this should fix

.github/workflows/update-docs.yml

@@ -41,6 +41,15 @@ jobs:
         run: node scripts/doc-generate.mjs
       - name: Generate example docs into maps-docs repo
         run: bun scripts/example-docs.ts
+      - name: Generate example app into maps-docs repo
+        run: |
+          cd example
+          echo $MAPBOX_WEB_ACCESS_TOKEN > accesstoken
+          yarn install
+          npx expo export -p web --outpub-dir ../../maps-docs/example-app
+        working-directory: maps
+        env:
+          MAPBOX_WEB_ACCESS_TOKEN: ${{ secrets.MAPBOX_WEB_ACCESS_TOKEN }}
       - name: Setup deploy key for github deploy
         uses: webfactory/[email protected]
         with:

example/App.js

@@ -0,0 +1,3 @@
+import App from './src/App';
+
+export default App;

example/app.json

@@ -5,6 +5,9 @@
     "web": {
       "bundler": "metro",
       "output": "single"
+    },
+    "experiments": {
+      "baseUrl": "/example-app"
     }
   }
 }

example/metro.config.js

@@ -1,6 +1,7 @@
+// https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/expo-library/example/metro.config.js
 const path = require('path');
 
-const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { getDefaultConfig } = require('expo/metro-config');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 
@@ -9,9 +10,12 @@ const root = path.resolve(__dirname, '..');
 const libPackageJson = require('../package.json');
 
 const libPeerDependencies = Object.keys(libPackageJson.peerDependencies)
-  .concat(['@babel/runtime'])
+  .concat(['@babel/runtime', 'react-native-web'])
   .concat(Object.keys(libPackageJson.dependencies));
 
+const modules = libPeerDependencies;
+
+/** @type {import('expo/metro-config').MetroConfig} */
 const defaultConfig = getDefaultConfig(__dirname);
 
 /**
@@ -21,18 +25,22 @@ const defaultConfig = getDefaultConfig(__dirname);
  * @type {import('metro-config').MetroConfig}
  */
 const config = {
+  ...defaultConfig,
+
   projectRoot: __dirname,
   watchFolders: [root],
 
   resolver: {
+    ...defaultConfig.resolver,
+
     blacklistRE: exclusionList(
-      libPeerDependencies.map(
+      modules.map(
         (m) =>
           new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
       ),
     ),
 
-    extraNodeModules: libPeerDependencies.reduce((acc, name) => {
+    extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);
       return acc;
     }, {}),
@@ -41,6 +49,8 @@ const config = {
   },
 
   transformer: {
+    ...defaultConfig.transformer,
+
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
@@ -50,4 +60,38 @@ const config = {
   },
 };
 
-module.exports = mergeConfig(defaultConfig, config);
+const fixWebExportToUseWebSuffixForRNMBX = true;
+if (fixWebExportToUseWebSuffixForRNMBX) {
+  config.resolver.resolveRequest = (context, moduleName, platform) => {
+    let result = null;
+    if (platform === 'web' && moduleName === path.join(root, 'src', 'index')) {
+      result = context.resolveRequest(context, moduleName + '.web', platform);
+    } else {
+      result = context.resolveRequest(context, moduleName, platform);
+    }
+    return result;
+  };
+}
+
+const debugModuleResolution = false;
+if (debugModuleResolution) {
+  config.maxWorkers = 1;
+  config.resolver.resolveRequest = (context, moduleName, platform) => {
+    let result = null;
+    if (platform === 'web' && moduleName === path.join(root, 'src', 'index')) {
+      result = context.resolveRequest(context, moduleName + '.web', platform);
+    } else {
+      result = context.resolveRequest(context, moduleName, platform);
+    }
+    console.log(
+      ' => resolveRequest',
+      context.originModulePath,
+      moduleName,
+      platform,
+      result,
+    );
+    return result;
+  };
+}
+
+module.exports = config;

example/src/App.js

@@ -3,6 +3,7 @@ import Mapbox from '@rnmapbox/maps';
 import { StyleSheet, Text, View, LogBox, SafeAreaView } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NavigationContainer } from '@react-navigation/native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import sheet from './styles/sheet';
 import colors from './styles/colors';
@@ -41,9 +42,11 @@ function AppStackNavigator() {
 }
 
 const AppContainer = () => (
-  <NavigationContainer>
-    <AppStackNavigator />
-  </NavigationContainer>
+  <SafeAreaProvider>
+    <NavigationContainer>
+      <AppStackNavigator />
+    </NavigationContainer>
+  </SafeAreaProvider>
 );
 class App extends React.Component {
   constructor(props) {