React-native: Error using react-native cli after upgrading to v0.40.0-rc.*

[Kaishley]

Description

Upgraded from v0.39.0 to v0.40.0-rc.1
When executing run-android or upgrade, the following output is displayed.

...\node_modules\babel-core\lib\transformation\file\index.js:600
      throw err;
      ^

SyntaxError: .../node_modules/react-native/packager/react-packager/src/Bundler/index.js: Unexpected token, expected ) (42:8)
  40 |
  41 | export type GetTransformOptions<T> = (
> 42 |   string,
     |         ^
  43 |   Object,
  44 |   string => Promise<Array<string>>,
  45 | ) => T | Promise<T>;
    at Parser.pp$5.raise (...\node_modules\babylon\lib\index.js:4215:13)
    at Parser.pp.unexpected (...\node_modules\babylon\lib\index.js:1599:8)
    at Parser.pp.expect (...\node_modules\babylon\lib\index.js:1587:33)
    at Parser.pp$7.flowParsePrimaryType (...\node_modules\babylon\lib\index.js:4952:14)
    at Parser.pp$7.flowParsePostfixType (...\node_modules\babylon\lib\index.js:5025:38)
    at Parser.pp$7.flowParsePrefixType (...\node_modules\babylon\lib\index.js:5041:17)
    at Parser.pp$7.flowParseIntersectionType (...\node_modules\babylon\lib\index.js:5047:19)
    at Parser.pp$7.flowParseUnionType (...\node_modules\babylon\lib\index.js:5057:19)
    at Parser.pp$7.flowParseType (...\node_modules\babylon\lib\index.js:5068:19)
    at Parser.pp$7.flowParseTypeInitialiser (...\node_modules\babylon\lib\index.js:4393:19)

It is the first time I encountered this error. Downgrading back to 0.39.0 fixes this issue.

Additional Information

• React Native version: 0.40.0-rc.1
• Platform: Android. Not tested for iOS
• Operating System: Windows 10

[Kaishley]

I found out that the babylonfound in my-app/node_modules was a different version than the one required by react-native. When I navigated to my-app/node_modules/react-native/node_modules/, I found a babylon that is the required version for react-native.

I updated the my-app/node_modules/babylon to the required version, and the issue was fixed.

Shouldn't react-native be using the my-app/node_modules/react-native/node_modules/ before using the ones in my-app/node_modules?

[GantMan]

I had the same issue. Blowing away my node_modules and re-installing fixed it for me.

[nihgwu]

I got this error even from react-native-init, I just modified the type definition to export type GetTransformOptions<T> = any for a temp workaround.

[Venryx]

Had the same issue, and also fixed it using solution by Kaishlet above.

[KenChoi1992]

Same problem here, first run

npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev

Then copy node_modules/react-native/node_modules/babylon to override node_modules/babylon fix this problem.

[MobiusHorizons]

The above worked for [email protected], but not for [email protected]. Anyone have suggestions?

[mklb]

Running the following should fix it
npm install --save babylon

[MobiusHorizons]

I should also note that it has to be npm not yarn, based on my testing this morning.
and running npm install --save babylon followed by yarn will break it again.

[adrienthiery]

If it can help someone else, in my case this error showed up after I introduced an error in my code.

The error being in a react-native functional component :

export default function PaddingView(props) {
    return (
        <FlexView
            {...props}
            style={[
                styles.paddingOfView,
                props.style,
            ]}
        >
            {this.props.children} // In addition to being useless, I don't have `this.props` here, but just `props`. This was the error.
       </FlexView>
    );
}