Haul: Can we use react-navigation v5 with haul?

[tkow]

Ask your Question

Can we use react-navigation v5 with haul?
I can use react-navigation v4, though I get errors when using v5.

I found succeeding in the process before bundling js and it seems success to bundle js like this.

I suspected it derived from flow's compiled process though I'm not confident.
Are there any ideas for that?

react-native info
```text:react-native-info
info Fetching system and libraries information...
System:
OS: macOS 10.15.3
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Memory: 727.79 MB / 32.00 GB
Shell: 5.7.1 - /usr/local/bin/zsh
Binaries:
Node: 12.14.1 - ~/.anyenv/envs/nodenv/versions/12.14.1/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.13.4 - ~/.anyenv/envs/nodenv/versions/12.14.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 25, 26, 27, 28, 29
Build Tools: 27.0.3, 28.0.1, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild

related library-version extracted

```json
dependencies: {
    "@react-native-community/masked-view": "^0.1.6",
    "react": "^16.12.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.5",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.6.4",
    "react-native-screens": "^2.0.0-alpha.32",
    "metro-react-native-babel-preset": "^0.58.0",
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@haul-bundler/babel-preset-react-native": "^0.16.0",
    "@haul-bundler/cli": "^0.16.0",
    "@haul-bundler/inspector": "^0.16.0",
    "@haul-bundler/preset-0.60": "^0.16.0"
}

haul.config.js

```typescript:haul.config.js
import * as path from 'path';
import { makeConfig, withPolyfills } from '@haul-bundler/preset-0.60';
import { smart } from 'webpack-merge'

var detoxFlg = process.env.APP_ENV === 'detox_tests';
var detoxExtension = detoxFlg ? ['.mock.behaviour.js'] : [];

export const webpackConfig = ({ config, env }) => {
const { platform } = env;
const addConfig = {
resolve: {
alias: {
'~': path.join(__dirname, 'src/')
},
extensions: [
.${platform}.tsx,
.${platform}.ts,
.${platform}.jsx,
.${platform}.js,
'.native.tsx',
'.native.ts',
'.native.jsx',
'.native.js',
...detoxExtension,
'.tsx',
'.ts',
'.jsx',
'.js',
]
}
};
return smart(config,addConfig);
};

export default makeConfig({
bundles: {
index: {
entry: withPolyfills('./index.tsx'),
transform: webpackConfig
}
}
});

babel.config.js

module.exports = {
presets: ['@haul-bundler/babel-preset-react-native'],
};

metro.config.js

/**

• Metro configuration for React Native
• https://github.com/facebook/react-native
  *
• @format
  */

module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
```

In addition:

I found another error log from browser console of haul. Maybe it doesn't seem to compile libraries under node_modules because I may not include setting resolve modules due to setting default.

Furthermore, I found additional information from XCode.

E0203 12:21:37.308321 270102528 NativeToJsBridge.cpp:160] Attempting to call JS function on a bad application bundle: HMRClient.setup()
2020-02-03 12:21:37.314 [fatal][tid:main] Unhandled JS Exception: Attempted to assign to readonly property.

[tkow]

I resolved this with this code.

      looseMode: [/@react-native-community\/masked-view/],

as documented in this section.

I don't know where this library has loose code, but it works.