react-native: Newer node versions (>=6) failing to compile script via Babel during execution

Description

I upgraded to RN 0.39.2 today, but had problems every time I ran the packager (via yarn start and react-native bundle [...]. The error I got was:

$ yarn start
yarn start v0.18.1
$ cd node_modules/react-native && npm start -- --reset-cache

> react-native@0.38.1 start /Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules/react-native
> /usr/bin/env bash -c './packager/packager.sh "$@" || true' -- "--reset-cache"

/Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules/react-native/packager/react-packager/src/Logger/index.js:85
printFields? = [])
           ^
SyntaxError: Unexpected token ?
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at loader (/Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules/react-native/packager/react-packager/index.js:14:16)
✨  Done in 1.67s.

Reproduction

Run the packager via a recent Node version:

$ node --version
v6.9.2
$ node_modules/react-native/./packager/packager.sh --reset-cache
/Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules/react-native/packager/react-packager/src/Logger/index.js:85
printFields? = [])
           ^
SyntaxError: Unexpected token ?
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at loader (/Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules/react-native/packager/react-packager/index.js:14:16)

Solution

Solution 1, in my control: Downgrade to Node 5.x:

$ node --version
v5.12.0
$ node_modules/react-native/./packager/packager.sh --reset-cache
Scanning 1086 folders for symlinks in /Users/joshua/dev/work/Taxfix/taxfix-ios/TaxfixReactNative/node_modules (14ms)
 ┌────────────────────────────────────────────────────────────────────────────┐
 │  Running packager on port 8081.                                            │
 │                                                                            │
 │  Keep this packager running while developing on any JS projects. Feel      │
 │  free to close this tab and run your own packager instance if you          │
 │  prefer.                                                                   │
 │                                                                            │
 │  https://github.com/facebook/react-native                                  │
 │                                                                            │
 └────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
[...]

Solution 2, requiring a patch on your side:

Update babelRegisterOnly.js to explicitly include the transform-es2015-parameters plugin. Proof:

# Without transform-es2015-parameters
$ ./node_modules/.bin/babel --no-babelrc --plugins transform-flow-strip-types,transform-object-rest-spread,transform-react-jsx node_modules/react-native/packager/react-packager/src/Logger/index.js | grep "function print"
function print(logEntry, printFields? = []) {

# Same as above, with transform-es2015-parameters
$ ./node_modules/.bin/babel --no-babelrc --plugins transform-flow-strip-types,transform-object-rest-spread,transform-react-jsx,transform-es2015-parameters node_modules/react-native/packager/react-packager/src/Logger/index.js | grep "function print" -A 1
function print(logEntry) {
  let printFields = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

However, it seems like this should be unnecessary. I’d imagine the underlying issue is with transform-flow-strip-types not stripping the ? correctly, and that transform-es2015-parameters conveniently solves the issue. I’ll look into that further, but at least these are two concrete workarounds.

Additional Information

React Native version: 0.39.2
Platform: iOS
Operating System: macOS

AFAIK the offending code has been removed in the last few days (via ede04abf8f4463155c196c6cfb8ea47684e8c6b8), but there’s no reason it won’t appear again and cause problems!

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 16
Comments: 18 (9 by maintainers)

Most upvoted comments

Solution 2 is working fine for me. Put following plugins : plugins: [ ‘transform-flow-strip-types’, ‘syntax-trailing-function-commas’, ‘transform-object-rest-spread’, ‘transform-es2015-parameters’ ]

in babelRegisterOnly.js file.

+12

ghost on Jan 11, 2017

@goldylucks @wcandillon I’ve run into this exact issue - the problem was that even when you manually fix the versions, the wrongly compiled file was already in the babel cache so it never got recompiled.

Try running BABEL_DISABLE_CACHE=1 react-native run-ios This should now run packager successfully since we’re not using the cache any more. If it still fails, something else might be wrong (AFAIK, you need to make sure that both babel-generator and babel-plugin-transform-flow-strip-types are on at least 6.21.0 (lower might work but I did not test that)).
If this works, then the next step would be to clear the babel cache. The default location for that seems to be ~/.babel.json, so you could just delete that file. Alternatively, you could put a console.log(FILENAME) somewhere after it gets set in your /node_modules/babel-register/lib/cache.js file and find where the cache is located that way. More info can be found in the babel docs

Finally, I initially ran into this issue after adding a manual dependency on babel-register which meant that the latest babel-generator was being used alongside an outdated babel-plugin-transform-flow-strip-types.

nikaspran on Feb 3, 2017

@wcandillon I don’t know how best to do it with package.json w/ npm only. We’re using Yarn, so I manually updated yarn.lock to point babel-plugin-transform-flow-strip-types to 6.21.0. For us, that block looks like:

babel-plugin-transform-flow-strip-types@^6.18.0, babel-plugin-transform-flow-strip-types@^6.3.13, babel-plugin-transform-flow-strip-types@^6.5.0, babel-plugin-transform-flow-strip-types@^6.7.0, babel-plugin-transform-flow-strip-types@^6.8.0:
  version "6.21.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.21.0.tgz#2eea3f8b5bb234339b47283feac155cfb237b948"
  dependencies:
    babel-plugin-syntax-flow "^6.18.0"
    babel-runtime "^6.0.0"

Whether or not that is a Good Idea™ or not is another discussion 😉

notjosh on Jan 19, 2017

Okay, this looks like it’s recently been addressed by the Flow team (!). PR here: https://github.com/babel/babel/pull/4872, issue here: https://github.com/babel/babel/issues/4863.

So I suppose the actual solution here is to bump the requirement for babel-plugin-transform-flow-strip-types in package.json to ^6.21.0, and verify it works.

(FWIW, it’s working for me via npm install; npm start, but fails via yarn install; yarn start. I’m too tired to work out why on earth that’d happen, despite even manually overwriting the seemingly relevant packages!)

notjosh on Dec 23, 2016