Metro has encountered an error: While trying to resolve module @react-native-mapbox-gl/maps

Versions (please complete the following information):

• Platform: [iOS]
• Platform OS: [IOS 14.5]
• Device: [e.g. iPhone6]
• Emulator/ Simulator: [yes]
• Dev OS: [11.3.1]
• react-native-mapbox-gl Version [8.2.1]
• Mapbox GL version []
• React Native Version [0.64.2]

Describe the bug
The package doesn’t work. See the error bellow.

To Reproduce

react-native init client cd client npm run ios npm install @react-native-mapbox-gl/maps --save Then replace the App.js code by :

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import type { Node } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import MapboxGL from '@react-native-mapbox-gl/maps';

const Section = ({ children, title }): Node => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

MapboxGL.setAccessToken('API_KEY');

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            <MapboxGL.MapView style={styles.map} />
          </Section>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: 'tomato',
  },
  map: {
    flex: 1,
  },
});

export default App;

The error

Metro has encountered an error: While trying to resolve module `@react-native-mapbox-gl/maps` from file `/Users/ecovelo/epitech/a2pas/client/App.js`, the package `/Users/ecovelo/epitech/a2pas/client/node_modules/@react-native-mapbox-gl/maps/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/ecovelo/epitech/a2pas/client/node_modules/@react-native-mapbox-gl/maps/javascript/index.js`. Indeed, none of these files exist:

  * /Users/ecovelo/epitech/a2pas/client/node_modules/@react-native-mapbox-gl/maps/javascript/index.js(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * /Users/ecovelo/epitech/a2pas/client/node_modules/@react-native-mapbox-gl/maps/javascript/index.js/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx): /Users/ecovelo/epitech/a2pas/client/node_modules/metro/src/node-haste/DependencyGraph.js (436:17)

  434 |
  435 |         if (error instanceof InvalidPackageError) {
> 436 |           throw new PackageResolutionError({
      |                 ^
  437 |             packageError: error,
  438 |             originModulePath: from,
  439 |             targetModuleName: to

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start

Additional context
See comments

[Florian-crg]

It is solved. I have re-done all the install and change the order of post_install elements.

  pre_install do |installer|
    $RNMBGL.pre_install(installer)
  end

  post_install do |installer|
    $RNMBGL.post_install(installer)
    react_native_post_install(installer)
  end

[ferdicus]

ok, thanks for the video - you can remove it again 👍🏿

I’ll give this a go tomorrow and report back