I am getting Transformer is not a constructor error after upgrading my react native version to latest. My metro-react-native-babel-preset version is 0.64.0 Please help me with a solution

I am getting Transformer is not a constructor error after upgrading my react native version to latest. My metro-react-native-babel-preset version is 0.64.0 Please help me with a solution

• javascript
• react-native
• metro-bundler

5 Answers 5

Are you by any chance including the react-native-fs package (v2.17.0)? That package has an internal dependency of an older metro and metro-config (v0.51.1) and my project is resolving to that version instead of the latest.

Try running npm ls metro-config to see which version is resolving (i.e. the one at the top of the list that comes back). I had to force-install both metro and metro-config like so:

npm i -D [email protected] [email protected] --force

In my case, just like @cr0ybot said, it was related with an incompatible version of metro-config.

Steps to solve:

1. yarn list metro-config (it lists all packages that depends on metro-config).
2. If you have more than one version installed, try to discover which package is depending on.
3. Upgrade the package that depends on the old version of metro-config

If yarn list is not helping much, you will need to have a look on your yarn.lock to figure out the dependencies.

In my case the problem was the react-native-community/cli, but can be any package.

Not sure if this will help, but on my react-native app I accidentally bumped my react-native version to 0.64.1 and saw this. Reverting back to the version I was using previously (0.63.2) solved my issue.

Basically this can happen with the incompatibility of versions of react and metro-config.

Please do check the version of metro-config being expected by running npm ls metro-config, this will list as shown below

And then force update using npm i -D [email protected] [email protected] --force to the version being expected

Fixed by changing the metro.config.js file to

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