7

enter image description hereI 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

5 Answers 5

13

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
Sign up to request clarification or add additional context in comments.

Comments

2

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.

Comments

0

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.

Comments

0

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

enter image description here

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

Comments

-2

Fixed by changing the metro.config.js file to

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.