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

Question

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.

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.

Silk

can you please share code of how you are rendering maps conditionally? – Johniejohnna

Answer 1

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

Marek

Not OP, but even after I ran that I still had issues running. I have the same setup as OP. I tried wrapping the component to be rendered in Platform.select, but it seems that expo still tries to build both components and reactive native maps was still having issues. – Lather

@K.Shores I think, you are doing something wrong, can you connect with me on LinkedIn, we can debug it on call linkedin.com/in/numandev – Marek

we're getting this error & we're not even using react native maps, any idea what the issue could be @MuhammadNuman ? – Brody

Answer 2

First, create a file name react-native-map-web-fix.js then copy paste the below code into the created file:

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);
}
async function reactNativeMaps() {
  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();

Edit your package.json file, in the scripts object include the below line:

"postinstall": "node ./postInstall && node react-native-map-web-fix.js",

After that, create a file with the name postInstall.js in the root file of your project and run the npm install code in the terminal. After all, run the npm start to run the app.

Unravel