react-native: Error: Couldn't find preset "module:metro-react-native-babel-preset"

I seemed to have solved this by removing everything in the babelrc file:

# .babelrc
{
}

react-native-git-upgrade then tries to re-add this during installation. I kept removing it and re-saving the file, and it continued without crashing. Then I added the contents back.

@Amnesthesia 's workaround allowed my upgrade to progress a bit further, but eventually react-native-git-upgrade re-added the preset to .babelrc file and failed at the same error in the end.

My solution was to rename .babelrc -> .babelrc2 during upgrade which worked. I restored the .babelrc config after the upgrade.

Happened to me when upgrading v0.57.0 -> v0.57.1 and v0.57.1 -> v0.57.2.

yarn add metro-react-native-babel-preset --dev https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset

You can try this: Change the line of file “.babelrc”: from { “presets”: [“module:metro-react-native-babel-preset”] } to { “presets”: [“react-native”] }

It worked for me.

@calcazar Try this

1. Create babel.config.js with the following content (basically equivalent to stock .babelrc)

module.exports = function (api) {
  api.cache(true)

  return {
    presets: ['module:metro-react-native-babel-preset']
  }
}

1. Remove .babelrc
2. Run yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core

I didn’t have to add any transforms to jest after that.

It should be fixed now, make sure you are using metro 0.45.6 (a simple-reinstall of the node_modules should be enough).

@Amnesthesia 's workaround allowed my upgrade to progress a bit further, but eventually react-native-git-upgrade re-added the preset to .babelrc file and failed at the same error in the end.

My solution was to rename .babelrc -> .babelrc2 during upgrade which worked. I restored the .babelrc config after the upgrade.

Happened to me when upgrading v0.57.0 -> v0.57.1 and v0.57.1 -> v0.57.2.

Worked beautifully! 👍🏼

@dylancompanjen so what worked for my case was I added this to my jest config in my package.json

    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }

Hope it helps

This is still happening with a fresh project using latest react-native version (0.57.4)

How to reproduce

1. Create a new react-native project
2. Add a test file e.g.:

// App.spec.js
it('renders correctly', () => {
  expect(1).toEqual(1);
});

1. npm test

a manual solution shouldn’t be needed imo

Why? I never use react-native-git-upgrade whenever I update my projects, I prefer to do things manually to have granular control over the changes I apply 🤷‍♂️

Moreover, as discussed here, there is noone currently maintaining that portion of the CLI - so it’s always a risk to use it.

adding the transform to my jest config in package.json fixed it for me

"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }
  },

just simply delete .babelrc in ##your## project root. you will save your day. After Everything clean and update done, re-add .bablerc with the content you deleted before

tl;dr: Please publish a new release of react-native-git-upgrade to npm

A fix for this landed in https://github.com/facebook/react-native/pull/20790, but a new release of react-native-git-upgrade including this commit has not yet been published. I was able to successfully upgrade by cloning the react-native repo, running npm i in the react-native-git-upgrade directory, then from my project from 0.57.0 to 0.57.2 by running

node ../react-native/react-native-git-upgrade/index.js 0.57.2

Would also close https://github.com/facebook/react-native/issues/21531 and https://github.com/facebook/react-native/issues/18886 (dupes)

FWIW, https://facebook.github.io/react-native/docs/upgrading.html still recommends react-native-git-upgrade, and specifically installing it from npm.

@canyara I already added metro-react-native-babel-preset (and updated my babelrc). The bug still appears.

The problem persists, when I use the ‘module:metro-react-native-babel-preset’, the application works but don’t work the tests. And I use the preset ‘react-native’, the application don’t work, but the tests works.

I am also getting exactly the same error when running the tests on a fresh react-native 0.57.1 project. To reproduce:

Steps

react-native init TestProject
cd TestProject/
touch App.test.js

# Add this to App.test.js
# describe('hello', () => {
#   it('basic', () => {
#     expect(1+1).toEqual(2);
#   });
# });

yarn test

Output

$ jest --no-cache
 FAIL  ./App.test.js
  ● Test suite failed to run

    Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/Users/manos/Projects/TestProject"

      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)

Test Suites: 1 failed, 1 total

Worth mentioning that there is an open related issue on the metro repository: https://github.com/facebook/metro/issues/242

Thought I should share it here since I can’t see any activity around this issue.

Same here, trying to upgrade from 0.53 to 0.57 with “react-native-git-upgrade” on Ubuntu 18.04 LTS

@rszalski’s solution worked for me;

1. Create babel.config.js with the following content (basically equivalent to stock .babelrc)

module.exports = function (api) {
  api.cache(true)

  return {
    presets: ['module:metro-react-native-babel-preset']
  }
}

1. Remove .babelrc
2. Run yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core

I didn’t have to add any transforms to jest after that.

@mezod I managed to work around it by deleting the .babelrc file and adding a babel.config.js

module.exports = function (api) {
  api.cache(true);
   return {
    presets: [
      'module:metro-react-native-babel-preset'
    ]
  };
};

Discussed in more detail here: https://github.com/facebook/metro/issues/242#issuecomment-431350665

Why would you follow the manual steps AND do the git-upgrade? 🤔

To upgrade iOS and Android files like any other RN upgrade ? react-native-git-upgrade directly from the 0.56.0 didn’t work either.

I met the same situation. I initialized a project with react-native-cli, then I integrated MboX and use decorators, so my package.json and .babelrc like this:

"dependencies": {
    "mobx": "^4.8.0",
    "mobx-react": "^5.4.3",
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.4"
},
"devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.2.2",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.1",
    "react-test-renderer": "16.6.0-alpha.8af6728"
}

{
    "presets": ["module:metro-react-native-babel-preset"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
}

When i run react-native-git-upgrade, i get this error:

git-upgrade ERR! An error occurred during upgrade: git-upgrade ERR! Error: Requires Babel “^7.0.0-0”, but was loaded with “6.26.3”. If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn’t mention “@babel/core” or “babel-core” to see what is calling Babel.

Then i try to remove the @babel/plugin-proposal-decorators plugin from .babelrc like this:

{
  "presets": ["module:metro-react-native-babel-preset"]
}

I get another error:

git-upgrade ERR! An error occurred during upgrade: git-upgrade ERR! Error: Couldn’t find preset “module:metro-react-native-babel-preset” relative to directory…

Then i change .babelrc to babel.config.js:

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
}

Run react-native-git-upgrade, it work!

I found that if I remove the .babelrc first and run react-native-git-upgrade, it also work!（need to put .babelrc back after upgraded.）

Hope this helps someone else.

I always get error while installing vector icons

error: bundling failed: Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/home/....

I tried all ways to resolve this issue but none of them is working… I am tired solving this since 2 days

Do we have a status on this? I started a new project, brought my JS source in to it, ran jest and I get Couldn’t find preset “module:metro-react-native-babel-preset”

What solved my problem in the end, was simply building the project under Xcode and then running it with react-native run-ios.

If you’re attempting to upgrade your project and you’re stuck and unable to solve any problem, then this is what I did. Not the best way, but it works.

1. Create a fresh project, with the lastest react-native version
2. Run react-native run-ios, if it fails ensure to build it in xcode, abd then re-test it with react-native run-ios command
3. Copy your source files into your project (not your iOS not your Android directories)
4. Re-add all your dependencies (don’t copy your package.json file)
5. Run react-native link (if required)
6. Add all required permissions in your Info.plist
7. Repeat (2)
8. Copy your .git into the project and create a new branch

If you’re also building for Android, you’ll need to reconfigure your Android project (manifest, build.gradle, etc)

If you run into some problems then you might have skipped a step or I might have forgotten to mention something.

I ran into a few issues, but that’s because I forgot to add a few Babel plugins i was using for mobx.

This worked for me. Took a while, but in the end saved time instead of trying to understand vague error messages.

Same issue here when trying to upgrade over the last month.

• 0.56.0 to 0.56.1, failed, waited for the new release.
• 0.56.0 to 0.57.0, issue is still there, started a project from scratch on top 0.57.0.
• 0.57.0 to 0.57.1, issue is still there.

Already followed the manual steps @kelset, and also updated metro to 0.45.6.

Thank me later:

  "jest": {
    "preset": "react-native",
    "transform": { "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js" }
  }

Adding "postinstall": "rm $( find node_modules -name .babelrc)" in the scripts section of package.json and then running npm install OR yarn fixes this issue for me.

“jest”: { “preset”: “react-native”//do not contain this line maybe can help }

I tried all the solutions presented, but there was success in none at the moment. The Jest or React-Native team could speak on this case.

I seemed to have solved this by removing everything in the babelrc file:

# .babelrc
{
}

react-native-git-upgrade then tries to re-add this during installation. I kept removing it and re-saving the file, and it continued without crashing. Then I added the contents back.

Confirmed @Amnesthesia 's solution works.

Adding "postinstall": "rm $( find node_modules -name .babelrc)" in the scripts section of package.json and then running npm install OR yarn fixes this issue for me.

OK, current hopefully working solution after 55.3 > 57.8: @rszalski’s babel.config.js

+

    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "babel-jest"
    },

the transform only required for running tests from within webstorm, from command line the babel config works fine by itself

The closest I’ve gotten to a working Jest with that configuration gives the following errors at various points during the tests:

• ReferenceError: You are trying to import a file after the Jest environment has been torn down.
• TypeError: Cannot read property ‘default’ of undefined
• TypeError: stacktraceParser.parse is not a function

Additionally, it freezes during one of the tests and never completes. Also, there’s nothing specific about the test it freezes on; if I remove that test, it’ll get hung up on another.

I’ve been trying to get this resolved for weeks now. I don’t know what else to try.

The various solutions lead to different results for me but I still haven’t be able to make jest work properly. This is by far the most difficult RN upgrade to date due to the babel changes. Does anyone have any idea who is looking into this? Is it the RN, babel or jest team? It seems like we’re all just locked in a room babbling to ourselves in isolation. 🙂

I would normally just wait but apparently RN 0.58.0 has a fix for the AAPT2 issue and we’re trying to get this resolved since Google will soon not be allowing android.enableAapt2=false in gradle.properties.

WARNING: The option ‘android.enableAapt2’ is deprecated and should not be used anymore. Use ‘android.enableAapt2=true’ to remove this warning. It will be removed at the end of 2018.

🌧 When it rains…

I have the same problem too in a full new project with RN 0.58.0-rc.1

Should this be closed? I too am having the same problem, and “it worked eventually” doesn’t seem like much of a solution.

on the babel file .babelrc change this { “presets”: [“module:metro-react-native-babel-preset”] } for this { “presets”: [“react-native”] } it worked for me

New projects I have create use the babel module metro, old projects i already finished uses presets : react-native,i dont know why it changed but i changed the new one for the old one and it worked.