React native with haul not working, throwing some loader issue - reactjs

Question

I have added haul to my react native project to analyze why my release build fails. but I got another problem instead. I have a webpack.haul.js with following config
module.exports = {
entry: './index.js',
};
When i run react-native run-android i see the following error. Can someone help me please.
ERROR Failed to compile.
./node_modules/native-base-shoutem-theme/src/StyleProvider.js 10:19
Module parse failed: Unexpected token (10:19)
You may need an appropriate loader to handle this file type.
| */
| export default class StyleProvider extends React.Component {
> static propTypes = {
| children: PropTypes.element.isRequired,
| style: PropTypes.object,
# ./node_modules/native-base-shoutem-theme/index.js 3:0-48 7:0-15:2
# ./node_modules/native-base/dist/src/index.js
# ./screens/Academics/HomeWorkScreen.js
# ./App.js
# ./index.js
# multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
./node_modules/native-base-shoutem-theme/src/connectStyle.js 116:26
Module parse failed: Unexpected token (116:26)
You may need an appropriate loader to handle this file type.
|
| class StyledComponent extends React.Component {
> static contextTypes = {
| theme: ThemeShape,
| // The style inherited from the parent
# ./node_modules/native-base-shoutem-theme/index.js 1:0-46 7:0-15:2
# ./node_modules/native-base/dist/src/index.js
# ./screens/Academics/HomeWorkScreen.js
# ./App.js
# ./index.js
# multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
./node_modules/rn-fetch-blob/index.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type.
| AppState,
| } from 'react-native'
> import type {
| RNFetchBlobNative,
| RNFetchBlobConfig,
# ./screens/Academics/HomeWorkScreen.js 1:603-627
# ./App.js
# ./index.js
# multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:bundleDemshReleaseJsAndAssets'.
> Process 'command 'node'' finished with non-zero exit value 1
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org

Answer 1

Your problem is that somehow or other, babel is not configured correctly to compile the features that exist in the code mentioned in those errors.
The specific problems:
static method properties (you need https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)
flow types (you need https://babeljs.io/docs/en/babel-plugin-transform-flow-strip-types)
It's hard to say exactly what is wrong with your config, but a faster way to test is to run the babel CLI directly on those files. If you ensure that BABEL_ENV and any other babel cli/env/API flags are set the same way as they are in the webpack build (you might have to do some debugging to find where babel-loader is applied), you can do for example yarn run babel node_modules/native-base-shoutem-theme/src/StyleProvider.js
If you can reproduce the problem like this, you can experiment in a much tigher loop with your babel configuration until you find a solution.
A good starting points is updating babel and all the presets/plugins you have installed.