CODEWITHSUNDEEP
react-nativebabeljs
Kevin Lee
Kevin Lee

Reputation: 282

ReactNativeCli init Helloworld project build error with Babel TransformError

I'm trying to learn React Native development by following instruction:

nvm install v4.2.6
nvm alias default v4.2.6
npm install -g react-native-cli
react-native init RNApp
cd RNAPP

Then I open iOS app project and compile program. Then I got follow error:

...
++ NVM_NPM_PREFIX=/Users/user/.nvm/versions/node/v4.2.6
++ nvm_tree_contains_path /Users/user/.nvm /Users/user/.nvm/versions/node/v4.2.6
++ '[' -n '' ']'
+ [[ -x /Users/user/.nodenv/bin/nodenv ]]
+ react-native bundle --entry-file index.ios.js --platform ios --dev true --bundle-output /Users/user/Library/Developer/Xcode/DerivedData/RNApp-ckxusxiznabgxxcrqessfpbjyrks/Build/Products/Debug-iphonesimulator/RNApp.app/main.jsbundle --assets-dest /Users/user/Library/Developer/Xcode/DerivedData/RNApp-ckxusxiznabgxxcrqessfpbjyrks/Build/Products/Debug-iphonesimulator/RNApp.app
bundle: Created ReactPackager
uncaught error Error: ReferenceError: [BABEL] /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage
    at Logger.error (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)
    at OptionManager.addConfig (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
    at OptionManager.findConfigs (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:16)
    at OptionManager.init (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)
    at File.initOptions (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transform (/Users/user/Desktop/RNApp/node_modules/react-native/packager/transformer.js:59:24)
TransformError: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage
See logs /var/folders/g9/m3cmg0m10cl80xt362wpsld00000gn/T/react-packager.log
    at SocketClient._handleMessage (SocketClient.js:139:23)
    at BunserBuf.<anonymous> (SocketClient.js:53:42)
    at emitOne (events.js:77:13)
    at BunserBuf.emit (events.js:169:7)
    at BunserBuf.process (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/bser/index.js:289:10)
    at /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/bser/index.js:244:12
    at nextTickCallbackWith0Args (node.js:419:9)
    at process._tickCallback (node.js:348:13)
Command /bin/sh failed with exit code 1

Is I do something wrong? or just there is something bug in babel for react-native support?

➜  RNApp  react-native --version
react-native-cli: 0.1.10
react-native: 0.18.1

But it seems that run-android is working fine:

:app:generateDebugSources
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources
:app:preDexDebug
:app:dexDebug
:app:validateDebugSigning
:app:packageDebug
:app:zipalignDebug
:app:assembleDebug
:app:installDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

Upvotes: 2

Views: 2430

Answers (2)

deju
deju

Reputation: 1028

I updated the npm packages.

react-proxy ==> 1.1.2

react-deep-force-update ==> 2.0.1

You need remove the packages files first in node_modules. Then install the new version.

It works for me.

Upvotes: 0

jevakallio
jevakallio

Reputation: 35890

This root cause of the issue is that React Native uses Babel 6, which deprecated the use of the stage option on .babelrc files, and react-deep-force-update, a sub-dependency of React Native, still declares a .babelrc file with that option.

This is an issue with any third party modules that still use an older Babel in their own build process and do not clear the configuration files for the npm publish.

I have worked around the issue by adding the following npm run scripts to my package json:

"scripts": {
  "clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
  "postinstall": "npm run clean:babelrc"
}

The script nukes all .babelrc files under the node_modules directory after every npm install, except the one under the react-packager directory, which is React Native packager uses to configure its own babel rules.

The issue is being tracked on React Native GitHub repository.

Upvotes: 4

Related Questions