Haul is not working with native-base!

[sean128]

Environment

"dependencies": {
"@haul-bundler/cli": "^0.15.0",
"native-base": "^2.13.8",
"react": "16.9.0",
"react-native": "0.61.5"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.7.4",
"@babel/runtime": "^7.7.4",
"@haul-bundler/babel-preset-react-native": "^0.15.0",
"@haul-bundler/preset-0.60": "^0.15.0",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"babel-preset-env": "^1.7.0",
"eslint": "^6.7.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.57.0",
"react-test-renderer": "16.9.0"
},

Description

I've added the native-base in to my react-native project with is initialize by 'react-native init AwesomeProject' command and after i import the native-base component, I got this error message in my simulator console.

Below is my configuration of babel and webpack

.babelrc

{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime"
]
}

webpack.haul.js

module.exports = ({platform}, {module}) => ({
entry: "./index.js",
module: {
...module,
rules: [
...module.rules,
{
test: /.js?$/,
include: [
/node_modules/@shoutem/,
/node_modules/react-native-vector-icons/,
],
use: [
{
loader: "babel-loader",
},
],
},
],
},
});

[Paweł Gulbinowicz]

The config file you posted is from legacy versions of Haul and it's not supported/not used at all. The correct one is haul.config.js. It should have been created when running yarn haul init (after installing @haul-bundler/cli).

[sean128]

Hi @zamotany Thanks for your quit response

Yes, I've already run the yarn hual init command and got haul.config.js configuration before I added the .babelrc config file manually, it's the same error pop up in my simulator whatever I delete or add the .babelrc file

haul.config.js

import { withPolyfills, makeConfig } from "@haul-bundler/preset-0.60";
export default makeConfig({
bundles: {
index: {
entry: withPolyfills('./index'),
},
},
});

[Paweł Gulbinowicz]

By default node_modules are excluded, so you should add another rule in webpack config with babel-loader to transpile native-base. Use transform function to get Webapck config.

[Paweł Gulbinowicz]

Similar to: https://github.com/callstack/haul/blob/master/docs/Recipes.md#debugging-with-react-native-tools-vscode-react-native
but:

• instead of source-map-loader use babel-loader
• remove enforce: 'pre'
• add include: ['path-to-native-base']

[sean128]

@zamotany I'm not sure does my path is wrong or something else?
here is my package name in node_modules:

[Paweł Gulbinowicz]

'/node_modules/native-base-shoutem-theme/' is a string, so according to webpack docs:

A string: To match the input must start with the provided string. I. e. an absolute directory path, or absolute path to the file.

The key here is must start - the absolute path to resource when webpack will check the rule does not starts with '/node_modules/native-base-shoutem-theme/'.

You probably want to replace it with a regex /node_modules[\/\\]native-base-shoutem-theme/.

[sean128]

it's worked! Thank you very much, you did me a big favor!

[sean128]