Metro has encountered an error: Cannot read properties of undefined (reading 'transformFie'): . . .

[nabtron]

Error while running react-native app on ios.

react-native version: 0.67.3

Metro has encountered an error: Cannot read properties of undefined (reading 'transformFie'): . . .

Tried changing node version to 17, 16.12, 14, etc. but no use.

Please help / guide. Thanks.

detailed error:

Metro has encountered an error: Cannot read properties of undefined (reading 'transformFile'): node_modules/metro/src/Bundler.js (48:30)

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_sim
0x0

[daihovey]

Same issue here.

[cosmosinnovate]

I am running into the same issues as above.

[robhogan]

Could someone who's experiencing this please post:

• Output of yarn list or npm list -a
• Contents of metro.config.js
• Contents of babel.config.js

This does look like we're trying to use Bundler._transformer before it's set, but although this code lives on the edge (relying on ordering of promise branches) - it should be ok, and I haven't been able to reproduce.

[nabtron]

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

npm list -a is huge, with only one possible warning in it:

─┬ [email protected]
│ ├── UNMET OPTIONAL DEPENDENCY react-native-windows@>=0.62.0
│ ├── [email protected] deduped
│ └── [email protected] deduped

No other error.

[robhogan]

Thanks @nabtron

npm list -a is huge, with only one possible warning in it

I'm actually more interested in the package versions you have - my working theory is that this might be a transform bug in a recent minor dependency update, causing promise branches to execute out of order. That's partly because a cluster of recent reports against an old Metro version suggests the issue is in a recently released dependency rather than Metro itself.

You could post the output to a gist if you like, or filter down to babel-, @babel and metro- dependencies and post the versions here. Equivalently, uploading your package-lock.json would work.

Are you still regularly seeing this issue?

[nabtron]

@rh389

package-lock.json: https://gist.github.com/nabtron/3ab61e930e3ad997deaa54e294c3e154

[kidtzz]

This work for me

export NODE_OPTIONS=--openssl-legacy-provider

and i'm not downgrade my node

my node 17.7.1

i'm just install same node from package.json => dependencies => node on folder project react-native

[nabtron]

@kidtzz so issue is with metro or openssl?

[NaveenSubburaj]

Still facing this issue. Any update?

[nabtron]

@NaveenSubburaj no, i have abandoned react native due to bugs like these & lack of support and planning to move to native or flutter, lets see.

[alex27riva]

Hi everyone, I have the same issue

[itta611]

Hi! I solved this issue with downgrading node version. (In my case, v17.4.0 -> v16.13.0)

nodebrew install-binary 16.13.0
nodebrew use 16.13.0
npx react-native run-ios

[robhogan]

Yes, this is down to incompatibility of older versions of Metro with Node 17+. Contrary to the original issue report here, I haven't seen a reproduction for Node <17. The root cause is Node 17 using OpenSSL 3 (https://github.com/nodejs/node/issues/40455), which drops support for MD4 hashing, which we used until #752.

Three options:

• Update to React Native 0.68 (Metro 0.67) or higher. That includes the Metro fix for Node 17+ compatibility.
• Use Node 16 or older.
• Set NODE_OPTIONS=--openssl-legacy-provider

[ez-tech-global]

This work for me

export NODE_OPTIONS=--openssl-legacy-provider

and i'm not downgrade my node

my node 17.7.1

i'm just install same node from package.json => dependencies => node on folder project react-native

It works for me too! thanks

[ChiuMungZitAlexander]

I solved this by switching to node v16.

[Leleka14]

how did that go? moving to flutter or native because you cant setup your environment, good luck

[nabtron]

@Leleka14 xcode native is going amazing!

Although it's been a year and now i have coded many apps in react-native (abandoned expo), flutter and native, i loved native the most.

[haveamission]

Yes, this is down to incompatibility of older versions of Metro with Node 17+. Contrary to the original issue report here, I haven't seen a reproduction for Node <17. The root cause is Node 17 using OpenSSL 3 (nodejs/node#40455), which drops support for MD4 hashing, which we used until #752.

Three options:

• Update to React Native 0.68 (Metro 0.67) or higher. That includes the Metro fix for Node 17+ compatibility.
• Use Node 16 or older.
• Set NODE_OPTIONS=--openssl-legacy-provider

Still getting the error with React Native 0.71 on Node 18

EDIT: Weird, my metro is still .66 even on RN .71. Will look into.

[Jamal-ReachFirst]

Downgraded to node v16.20.1 react-native v0.67.4

Still facing this issue

[Jamal-ReachFirst]

Still facing this issue, reopen this

[akshitdandyan]

This work for me

export NODE_OPTIONS=--openssl-legacy-provider

and i'm not downgrade my node

my node 17.7.1

i'm just install same node from package.json => dependencies => node on folder project react-native

This worked for me as well. My node version is 18.16.1

[Mihai-github]

+1

[Dipali711]

This work for me

1. Downgrade node version to 16.13.0
2. export NODE_OPTIONS=--openssl-legacy-provider into .npmrc file inside nvm folder.
3. Add this two line in package.json "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts --openssl-legacy-provider build",

[yorickshan]

This work for me

export NODE_OPTIONS=--openssl-legacy-provider

and i'm not downgrade my node

my node 17.7.1

i'm just install same node from package.json => dependencies => node on folder project react-native

works for me