Search code examples
react-nativeexporeact-native-mapsmetro-bundler

Unable to resolve "../Utilities/Platform" error with Metro bundler

I use React Native with Expo, Expo Router and Metro to build a map application. I used react-native-maps package. React-native-maps is not available for the web (https://docs.expo.dev/versions/latest/sdk/map-view/), so I choose to use React Leaflet for the web. Then, in my app I do conditional rendering for rendering Leaflet on web and React Native Maps on Android and iOS.

My problem is that I have an error Unable to resolve "../Utilities/Platform" from "node_modules\react-native\Libraries\ReactPrivate\ReactNativePrivateInterface.js" error when I try to build for the web.

enter image description here

I found issues on Gihub with same problem : https://github.com/react-native-maps/react-native-maps/issues/4641. To resolve the problem, the person suggest to run a postinstall script. I am a big newbie and I'm not sure I did the things right.

What I did :

  • Create a postinstall.js script at the root of my project
  • Past the content of the postinstall script
  • Run node postinstall.js

This did not solve my problem. I am pretty sure that was not the right way to do it.

What I expect to happen, is to not have the error, and being able to build for the web.

Solution

  • did you add this script into package.json post-install script like this

    Package.json

     "scripts": {
   ....
    "postinstall": "node postinstall.js",
   ....
  }

    postinstall.js

    const chalk = require('chalk')
const { readFile, writeFile, copyFile } = require('fs').promises

console.log(chalk.green('here'))

function log(...args) {
  console.log(chalk.yellow('[react-native-maps]'), ...args)
}

reactNativeMaps = async function() {
  log('📦 Creating web compatibility of react-native-maps using an empty module loaded on web builds')
  const modulePath = 'node_modules/react-native-maps'
  await writeFile(`${modulePath}/lib/index.web.js`, 'module.exports = {}', 'utf-8')
  await copyFile(`${modulePath}/lib/index.d.ts`, `${modulePath}/lib/index.web.d.ts`)
  const pkg = JSON.parse(await readFile(`${modulePath}/package.json`))
  pkg['react-native'] = 'lib/index.js'
  pkg['main'] = 'lib/index.web.js'
  await writeFile(`${modulePath}/package.json`, JSON.stringify(pkg, null, 2), 'utf-8')
  log('✅ script ran successfully')
}

reactNativeMaps()

    after this install node_modules by npm i or yarn install, installing node_module will run this patch

    Don't forget to run npx react-native start --reset-cache command

    Note: After running the patch successfully, just verify that if this file exists or not node_modules/react-native-maps/lib/index.web.js