TransformError with babel-preset-react-native/index.js

Question

I'm brand new to react-native, and trying to render my first bit of text on the screen.

When I run react-native run-ios and then click into my sample app, I see the following error:

TransformError ENOENT: no such file or directory, open '.../albums/node_modules/babel-preset-react-native/index.js' while processing preset '.../babel-preset-react-native/index.js' RCTFatal RCTCxxBridge handleError

index.js DOES exist in my project, with the following code:

'use strict';
module.exports = require('./configs/main');

So far, I have tried the following:

1) Re-installing npm for babel-preset-react-native

2) Using yarn to remove and then re-add babel-preset-react-native
yarn remove babel-preset-react-native
yarn add [email protected]

3) Deleting babel.rc entirely

Nothing has worked. Eager to hear advice and suggestions for other things to try.

Answer 1

This is bug in the new version of babel-preset-react-native as it will added automatically after you run react-native init command

Please take a look at this github issue https://github.com/facebook/react-native/issues/15513

Workaround, try to change the version:

yarn remove babel-preset-react-native
yarn add [email protected]

if that's not work for you, try to remove trailing comma at node_modules/babel-preset-react-native/configs/main.js at this code below

https://github.com/facebook/react-native/blob/6ad7e8281b37ee2ce6425363c0b17420d056807a/babel-preset/configs/main.js#L40 and re-run your app

Answer 2

I got same problem yesterday and my way is:
1. Go to node_modules and remove babel-preset-react-native folder.
2. In root project type: npm install [email protected] --save-dev

Hope you get this solved.