React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
Memory: 68.43 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.8.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.3.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Xcode: 10.1/10O23u - /usr/bin/xcodebuild
npmPackages:
react: ^16.5.2 => 16.5.2
react-native: ^0.57.0 => 0.57.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 1.2.0
react-native-git-upgrade: 0.2.7
react-native-rename: 2.2.2
When trying to run "react-native-git-upgrade" it gives the following error:
git-upgrade ERR! An error occurred during upgrade:
Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "Users/...
Try to upgrade from React Native 0.56 to 0.57 with "react-native-git-upgrade".
Same here, trying to upgrade from 0.53 to 0.57 with "react-native-git-upgrade" on Ubuntu 18.04 LTS
Same error, 0.57.0-rc.3 to 0.57.0 on Mojave 10.14 Beta
yarn add metro-react-native-babel-preset --dev
https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset
@canyara I already added metro-react-native-babel-preset (and updated my babelrc). The bug still appears.
It should be fixed now, make sure you are using metro 0.45.6
(a simple-reinstall of the node_modules should be enough).
@kelset I'm still getting the same error.
Then I suggest you try to upgrade your project following the manual steps we wrote in the changelog.
If that still happens for you then please create a sample project that reproduces the issue.
I'm getting this as well, when upgrading from ReactNative 0.57.0-rc3, even with metro 0.45.6
```$ yarn why metro
=> Found "[email protected]"
info Has been hoisted to "metro"
info Reasons this module exists
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.
just a note from the metro's doc:
If you wish to use a custom Babel configuration by writing a .babelrc file in your project's root directory, you must specify all the plugins necessary to transform your code. React Native does not apply its default Babel configuration in this case. So, to make your life easier, you can use this preset to get the default configuration and then specify more plugins that run before it.
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
.
@canyara I already added metro-react-native-babel-preset (and updated my babelrc). The bug still appears.
In my case, there is incompatible issue react 16.5.2 have with react-native 0.57. Downgrade to React 16.5.1, restart react-native everything is ok
@dylancompanjen by the way, you need quit the react-native terminal and complete restart react-native if you already install metro-react-native-babel-preset
I'm facing the same issue while trying an upgrade from 0.56.0
to 0.57.1
.
I followed manual update from the changelog (with fixed [email protected]) but react-native-git-upgrade
still does the error
git-upgrade info Generate old version template
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 "/Users/myname/workspace/project"
at /Users/myname/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/Users/myname/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/myname/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/myname/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/myname/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at compile (/Users/myname/.config/yarn/global/node_modules/babel-register/lib/node.js:103:45)
at loader (/Users/myname/.config/yarn/global/node_modules/babel-register/lib/node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (/Users/myname/.config/yarn/global/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:561:32)
git-upgrade ERR! Restore initial sources
I deleted node_module, re-yarn, deleted yarn.lock, re-yarn, still the same.
[email protected]
I followed manual update from the changelog (with fixed [email protected]) but react-native-git-upgrade still does the error
Why would you follow the manual steps AND do the git-upgrade? 🤔
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.
After starting a fresh project I got https://github.com/facebook/react-native/issues/7308 error and tried fixing it with react-native-git-upgrade and got this error.
Been having problems with it since last week. Any solutions. (a manual solution shouldn't be needed imo)
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 383.12 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 23.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3
API Levels: 23, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4670197
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
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.
I am also getting exactly the same error when running the tests on a fresh react-native 0.57.1 project. To reproduce:
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
$ 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.
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.
react-native run-ios
, if it fails ensure to build it in xcode, abd then re-test it with react-native run-ios
commandIf 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.
Not so much related to this issue but I had another problem when trying to fresh install RN and maybe it could help someone.
I fresh installed RN using react-native-cli init and tried to run using run-ios command but build failed every time.
So I changed the Xcode project settings to use Legacy Build and then it worked. But the app didn't launch because it was giving me another error. The error was related to babel and I found a solution here: https://github.com/jquense/yup/issues/216
I am getting the same error, even when creating a brand new project with react-native init
. All I changed from the base is -
Please see the repo here - https://github.com/thomas-gilbert/react-native-metro-issue
React Native Environment Info:
System:
OS: macOS Sierra 10.12.6
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 337.80 MB / 16.00 GB
Shell: 5.2 - /bin/zsh
Binaries:
Node: 9.4.0 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.1, macOS 10.13, tvOS 11.1, watchOS 4.1
Android SDK:
Build Tools: 26.0.2, 27.0.1, 27.0.3
API Levels: 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.1/9B55 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-git-upgrade: 0.2.7
I have been going through quite a few different issues trying to resolve it and any change I make seems to show me another issue. Any help or insight would be appreciated.
@thomas-gilbert did you open xcode and try building it from there?
This solution started well https://github.com/facebook/react-native/issues/21241#issuecomment-423610383, it runs through the whole process and then complains about the error again and then rolls everything back.
@rottenoats The issue isn't with the app building or bundling; as that works fine. I get the above issue only when running jest.
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.
current react-native-git-upgrade depend to babel6 (https://github.com/facebook/react-native/blob/master/react-native-git-upgrade/package.json). babel7 can handle module
prefix (https://babeljs.io/docs/en/options#name-normalization) but I can't find this option on babel6 document. ( sorry I'm not good at babel ). Is this reason ?
Just tried with the fresh 0.57.2
and unfortunately, it looks like this is still happening on a fresh project. Steps to reproduce in my previous comment.
@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
.
@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
I got this error when use react-native-vector-icons library
version of react-native: 0.54.4
After search in many of solutions, i follow this step to upgrade react-native to 0.57.2 and all are resolved
https://facebook.github.io/react-native/docs/upgrading
Hope this help :)
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
@TheDevXen you can try my solution!
If you use react-native-elements, i think you must update that library to version 1.0.0-beta5
https://react-native-training.github.io/react-native-elements/docs/input.html
I hope this can help
"presets": ["module:metro-react-native-babel-preset"]
"presets": ["react-native"]
trims
@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
andv0.57.1
->v0.57.2
.
Worked beautifully! 👍🏼
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"
@calcazar Try this
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']
}
}
.babelrc
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.
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.
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.
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
This is still happening with a fresh project using latest react-native version (0.57.4)
1) Create a new react-native project
2) Add a test file e.g.:
// App.spec.js
it('renders correctly', () => {
expect(1).toEqual(1);
});
3) npm test
I've tried everything in this issue. Upgraded native to 0.57.5, react and react-test-renderer to 16.6.1, metro-react-native-babel-preset to 0.49.2...
I have my presets on babelrc declared, i deleted nodemodules and npm installed, i deleted ios/bundle... any ideas on what to try?
@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
It finally worked yesterday night. I say "it" because I can't tell what fixed it. I tried many things like watchman watch-del-all, npm start -- --reset-cache, etc without any luck rebuilding several times until after no significant change, it just went away. Pretty frustrating :D
Should this be closed? I too am having the same problem, and "it worked eventually" doesn't seem like much of a solution.
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 have the same problem too in a full new project with RN 0.58.0-rc.1
bump
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...
@rszalski's solution worked for me;
- 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'] } }
- Remove
.babelrc
- 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.
The closest I've gotten to a working Jest with that configuration gives the following errors at various points during the tests:
import
a file after the Jest environment has been torn down.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.
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"
}
},
OK, current hopefully working solution after 55.3 > 57.8: @rszalski's babel.config.js
+
"jest": {
"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
I just ran into this error message and found this thread. Just putting this here in case anyone else has a similar issue. I work on multiple projects under a ~/Projects
folder structure like ~/Projects/react-app-foo
and ~/Projects/some-node-app
.
A few days ago I accidentally copied some of my .dotfiles
from a react-native app into my ~/Projects
folder. Suddenly my node app was throwing the Couldn't find preset..
error when running jest on my node project. Deleting the .babelrc
from my parent folder fixed this for me. Hope it helps someone else.
@dsandor but in this case I believe the problem is another. Because the problem reported in this topic is related to running the tests with Jest, and running the react-native project. I believe that the folder structure does not imply this error that is occurring, and the error logs that are being displayed.
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.
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.
"jest": {
"preset": "react-native"//do not contain this line maybe can help
}
I have also solved this by removing my .babelrc in the root (wasn't relevant anyway).
But it seems Expo is not handling this correctly. Shouldn't we be able to have localized Babel configuration in the root of the app?
Maybe this requires a configuration in the .expo
?
Adding
"postinstall": "rm $( find node_modules -name .babelrc)"
in the scripts section of package.json and then runningnpm install
ORyarn
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.
Thank me later:
"jest": {
"preset": "react-native",
"transform": { "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js" }
}
Thank me later:
"jest": { "preset": "react-native", "transform": { "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js" } }
I've tried that too.
If you create a clean project, can you run some test with the jest using the renderer?
Because of what has already been explained, either you put the preset to react-native
and run the tests, or you run the application with themodule: react-native-babel-preset
preset. If you try to put both of them up, it's the problem that the community mentioned earlier in this issue.
So, I can't do my testing by using Jest now right? Anyone have alternative way to do the testing on react native application?
If you read this and related errors, you will notice that the directory it’s throwing the error from is inside node_modules.
A .babelrc will override in level of hierarchy other Babel configurations in subdirectories.
It would appear someone’s npm package is shipping with a .babelrc that presents a conflict when over-ridden.
This might also be another dot file in one of your project directories.
I would verify you don’t have another configuration file that might be read as a Babel config (I believe it accepts others than .babelrc)
As a test, try removing ALL dot files from your project (just move them if you need to save them), remove node_modules, then npm install again.
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 }]
]
}
md5-5758a7ae34488ffa0bd66f704389f95d
{
"presets": ["module:metro-react-native-babel-preset"]
}
md5-586a9c31308471c6f93316fe013b6182
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.
@Devil-Cong I did the test according to what you missed, it did not work either. Still giving the same problem.
@gutoglup Sorry,but it work for me.
Did you try remove the .babelrc
and run react-native-git-upgrade
?
When we try to run, this is what happens
bash: react-native-git-upgrade: command not found
@Devil-Cong
@Siva123Prasad You should install react-native-git-upgrade
first. Look at here.
I experienced the same issue for a while now. Yesterday, jest released [email protected], which upgraded its internals to Babel 7. I upgraded my dependency to the following:
"jest": "24.0.0"
"babel-jest": "24.0.0"
"metro-react-native-babel-preset": "0.51.1"
while still being on "react-native": "0.57.8"
That solved my issues. I hope it works for some of you
It seems that this issue was caused by incorrect upgrading - please refer to @Devil-Cong's comment above for a good step by step of how to avoid/fix the issue: https://github.com/facebook/react-native/issues/21241#issuecomment-456088170
Closing & locking as that comment fixes it, and also we are working on improving the upgrading procedure
Most helpful comment
@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
andv0.57.1
->v0.57.2
.