Haul is a command line tool for developing React Native apps, powered by Webpack

Last update: May 12, 2022

Haul

A command line tool for developing React Native apps


Build Status MIT License

PRs Welcome Code of Conduct

Chat tweet


Notice

We're actively working on a Haul successor, which would provide long awaited features like Hot Module Replacement + React Refresh and better feature-parity with Metro. The version 1.0.0 is already released!

If you're investigating using Haul, we highly recommend giving a react-native-webpack-toolkit a go.

If you're already using Haul, we recommend migrating to react-native-webpack-toolkit for better developer experience and feature set. The migration process is fairly straighforward, since you now have full access to webpack.config.js.


Haul is a drop-in replacement for react-native CLI built on open tools like Webpack. It can act as a development server or bundle your React Native app for production.

@haul-bundler/cli and other packages under @haul-bundler scope are a overhaul of haul package and support only React Native 0.59.0 and above. If you need to support older versions, please check legacy branch.

@haul-bundler/cli and other packages requires Node 10 to be installed. If you're running older version, please upgrade to Node 10 LTS or newer.

Features

  • Replaces React Native packager to bundle your app
  • Access to full webpack ecosystem, using additional loaders and plugins is simple
  • Doesn't need watchman, symlinks work nicely
  • Helpful and easy to understand error messages

Packages

Name Version Description Required
@haul-bundler/cli cli version CLI and commands implementation. Yes
@haul-bundler/core core version Core logic and functionality. Yes (installed with cli)
@haul-bundler/core-legacy core-legacy version Legacy logic from haul package Yes (installed with cli)
@haul-bundler/babel-preset-react-native babel-preset-react-native version Babel preset tweaked for RN 0.59+, which can decrease the bundle size by using only the necessary transforms. Yes (installed by init command)
@haul-bundler/basic-bundle-webpack-plugin basic-bundle-webpack-plugin version Webpack plugin with tweaks for plain JS bundle. Yes (installed with cli)
@haul-bundler/ram-bundle-webpack-plugin ram-bundle-webpack-plugin version Webpack plugin for RAM bundle support. Yes (installed with cli)
@haul-bundler/preset-0.59 preset-0.59 version Preset with configuration tweaked for RN 0.59. Yes (installed by init command when using RN 0.59)
@haul-bundler/preset-0.60 preset-0.60 version Preset with configuration tweaked for RN 0.60. Yes (installed by init command when using RN 0.60)
@haul-bundler/explore explore version Explore and analyse generated bundle No (optional)

Getting started

Start by adding Haul as a dependency to your React Native project (use react-native init MyProject to create one if you don't have a project):

yarn add --dev @haul-bundler/cli

# Traditionalist? No problem:
npm install --save-dev @haul-bundler/cli

To configure your project to use haul, run the following:

yarn haul init
# npm >= 5.2.0 :
npx haul init
# npm < 5.2.0 :
npm install -g npx
npx haul init

This will automatically add the configuration needed to make Haul work with your app, e.g. add haul.config.js to your project, which you can customize to add more functionality.

Next, you're ready to start the development server:

yarn haul start
# Or:
npx haul start

Finally, reload your app to update the bundle or run your app just like you normally would:

react-native run-ios

Documentation

Check out the docs to learn more about available commands and tips on customizing the webpack configuration.

  1. CLI Commands
  2. Configuration
  3. Recipes
  4. Migration guide

Limitations

Haul uses a completely different architecture from React Native packager, which means there are some things which don't work quite the same.

  • Delta Bundles (RN 0.52+) have minimal support
  • Existing react-native commands
  • No support for Hot Module Replacement

The following features are unlikely to be supported in the future:

  • Haste module system: use something like babel-plugin-module-resolver instead
  • Transpile files under node_modules: transpile your modules before publishing, or configure webpack not to ignore them

Made with โค๏ธ at Callstack

Haul is an open source project and will always remain free to use. If you think it's cool, please star it ๐ŸŒŸ . Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? โš›๏ธ Join the team who does amazing stuff for clients and drives React Native Open Source! ๐Ÿ”ฅ

GitHub

https://github.com/callstack-io/haul
Comments
  • 1. Source-maps missing in dev builds

    Current Behavior

    I'm testing out building an app with Kotlin, and compiling sources to JS. Everything seems to be working really well with haul, except for stack-traces. I can debug kotlin sources, and everything. I just see this "can't symbolocate error" every time I see a crash:

    GET /index.android.bundle 200 11019287 - 12.494 ms
    POST /symbolicate 404 151 - 0.214 ms
    POST /symbolicate 404 151 - 0.141 ms
    

    If I watch the logs, I see the following:

    01-20 22:31:23.555  1925 15179 E ReactNativeJS: TypeError: Object.freeze can only be called on Objects.
    01-20 22:31:23.555  1925 15179 E ReactNativeJS: 
    01-20 22:31:23.555  1925 15179 E ReactNativeJS: This error is located at:
    01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in HelloWorld (at renderApplication.js:35)
    01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in RCTView (at View.js:71)
    01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in View (at AppContainer.js:102)
    01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in RCTView (at View.js:71)
    01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in View (at AppContainer.js:122)
    01-20 22:31:23.555  1925 15179 E ReactNativeJS:     in AppContainer (at renderApplication.js:34)
    01-20 22:31:23.567  1925 15179 E ReactNativeJS: TypeError: Object.freeze can only be called on Objects.
    01-20 22:31:23.567  1925 15179 E ReactNativeJS: 
    01-20 22:31:23.567  1925 15179 E ReactNativeJS: This error is located at:
    01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in HelloWorld (at renderApplication.js:35)
    01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in RCTView (at View.js:71)
    01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in View (at AppContainer.js:102)
    01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in RCTView (at View.js:71)
    01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in View (at AppContainer.js:122)
    01-20 22:31:23.567  1925 15179 E ReactNativeJS:     in AppContainer (at renderApplication.js:34)
    01-20 22:31:23.575  1925 15179 W ReactNativeJS: Unable to symbolicate stack trace: JSON Parse error: Unrecognized token '<'
    01-20 22:31:23.577  1925 15179 W ReactNativeJS: Unable to symbolicate stack trace: JSON Parse error: Unrecognized token '<'
    

    Expected Behavior

    My stack-traces would be able to be symbolicated just fine.

    Haul Configuration (webpack.haul.js)

    module.exports = ({ platform }, defaults) => ({
      entry: `./index.js`,
      module: {
        ...defaults.module,
        rules: [
          ...defaults.module.rules,
          {
            test: /\.js$/,
            use: ["source-map-loader"],
            enforce: "pre"
          }
        ]
      }
    });
    

    Your Environment

    | software | version | ---------------- | ------- | Haul | 1.0.0-beta.12 | react-native | 0.52 | node | 9.4.0 | npm or yarn | yarn 1.3.2

    Reviewed by ScottPierce at 2018-01-21 04:28
  • 2. New config implementation

    TODO

    • [x] Document it + add mention about e.g. --config #375
    • [x] When no config file is provided should fall back to default configuration
    • [x] Verbose safty-check for config builder.
    screen shot 2018-04-12 at 22 18 54

    Overview

    This should come after https://github.com/callstack/haul/pull/339 ๐Ÿ™

    I've introduced new config based on #323

    Default config file is now haul.config.js

    export default { 
      // Haul specific options - currently none
      webpack: {}, // Webpack config
    }
    

    tldr;

    type ConfigOptions = {
      root: string,
      platform: 'ios' | 'android',
      dev: boolean,
      minify?: boolean,
      bundle?: boolean,
    };
    

    function createWebpackConfig from Haul package is a helper to create a Webpack configuration. You can pass an argument as a function and the first argument will be ConfigOptions object, or just a plain object if you don't need configuration.

    Examples

    import { createWebpackConfig } from 'haul';
    
    export default {
      webpack: createWebpackConfig(({ platform }) => {
        entry: `./index.${platform}.js`,
      }),
    }
    

    You can also provide whole Webpack config without merging it with ours.

    import MyConfig from 'webpack.config.js'
    
    export default {
      webpack: MyConfig,
    }
    

    or you can easily override ours

    import { createWebpackConfig } from 'haul';
    
    export default {
      webpack: env => {
        const config = createWebpackConfig({
          entry: `./index.js`,
        })(env);
    
        config.plugins.push(new CaseSensitivePathsPlugin());
    
        return config;
      },
    }
    
    Reviewed by jukben at 2018-02-21 18:55
  • 3. Code splitting & OTA

    How to separate js bundle into framework bundle and user code bundle? and then ๏ผŒWhen we publish a single file to user's cell phone ,We Just need combine a single file to the base bundle.

    Reviewed by zimo888 at 2017-03-31 10:37
  • 4. New Project won't run since 1.0.0-rc.13

    Environment

    macOS Mojave 10.14.4 node v8.15.0 yarn v1.13.0

    Description

    New project fails with this in the iOS Simulator:

    Unhandled JS Exception: Attempted to assign to readonly property.
    
    
    eval code
    [email protected][native code]
    eval code
    [email protected][native code]
    ./node_modules/react-native/Libraries/BatchedBridge/[email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3528:5
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39
    
    eval code
    [email protected][native code]
    eval code
    [email protected][native code]
    ./node_modules/react-native/Libraries/BatchedBridge/[email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3515:5
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39
    
    eval code
    [email protected][native code]
    eval code
    [email protected][native code]
    ./node_modules/react-native/Libraries/BatchedBridge/[email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3541:5
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39
    
    eval code
    [email protected][native code]
    eval code
    [email protected][native code]
    ./node_modules/react-native/Libraries/Core/[email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4668:5
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39
    eval code
    [email protected][native code]
    eval code
    [email protected][native code]
    ./node_modules/react-native/Libraries/Core/[email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4694:5
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39
    
    eval code
    [email protected][native code]
    eval code
    [email protected][native code]
    ./node_modules/react-native/Libraries/Core/[email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4643:5
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39
    eval code
    [email protected][native code]
    http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:7590:5
    [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
    http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:791:37
    global [email protected]://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:792:12
    
    ./node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js
        index.bundle?platform=ios&dev=true&minify=false:3528:5
    __webpack_require__
        index.bundle?platform=ios&dev=true&minify=false:724:34
    fn
        index.bundle?platform=ios&dev=true&minify=false:101:39
    ./node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js
        index.bundle?platform=ios&dev=true&minify=false:3515:5
    __webpack_require__
        index.bundle?platform=ios&dev=true&minify=false:724:34
    fn
        index.bundle?platform=ios&dev=true&minify=false:101:39
    ./node_modules/react-native/Libraries/BatchedBridge/NativeModules.js
        index.bundle?platform=ios&dev=true&minify=false:3541:5
    __webpack_require__
        index.bundle?platform=ios&dev=true&minify=false:724:34
    fn
        index.bundle?platform=ios&dev=true&minify=false:101:39
    ./node_modules/react-native/Libraries/Core/ReactNativeVersionCheck.js
        index.bundle?platform=ios&dev=true&minify=false:4668:5
    __webpack_require__
        index.bundle?platform=ios&dev=true&minify=false:724:34
    fn
        index.bundle?platform=ios&dev=true&minify=false:101:39
    ./node_modules/react-native/Libraries/Core/checkNativeVersion.js
        index.bundle?platform=ios&dev=true&minify=false:4694:5
    __webpack_require__
        index.bundle?platform=ios&dev=true&minify=false:724:34
    fn
        index.bundle?platform=ios&dev=true&minify=false:101:39
    ./node_modules/react-native/Libraries/Core/InitializeCore.js
        index.bundle?platform=ios&dev=true&minify=false:4643:5
    __webpack_require__
        index.bundle?platform=ios&dev=true&minify=false:724:34
    fn
        index.bundle?platform=ios&dev=true&minify=false:101:39
    __webpack_require__
        index.bundle?platform=ios&dev=true&minify=false:724:34
    global code
        index.bundle?platform=ios&dev=true&minify=false:792:12
    

    If Remote JS Debugging is on this is the error shown in the Simulator:

    Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    
    RCTFatal
    __28-[RCTCxxBridge handleError:]_block_invoke
    _dispatch_call_block_and_release
    _dispatch_client_callout
    _dispatch_main_queue_callback_4CF
    __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
    __CFRunLoopRun
    CFRunLoopRunSpecific
    GSEventRunModal
    UIApplicationMain
    main
    start
    

    Seeing as 1.0.0-rc.12 works, the issue must be related to this commit as it's the only change from 1.0.0-rc.12 to 1.0.0-rc.13: https://github.com/callstack/haul/commit/87ad54a1ba3d897cd80e4d425d2e962bbbdc6f81

    Also when starting a new project the following errors occur but can be fixed by yarn add -D react-hot-loader react-dom (see also #532):

    Module not found: Error: Can't resolve 'react-dom' in '.../MyProject/node_modules/haul/node_modules/react-hot-loader/dist' 
    Module not found: Error: Can't resolve 'react-hot-loader' in '.../MyProject'
    

    One more thing. I'm seeing these warnings repeated from the yarn haul start --platform ios command. I've no idea where these are coming from.

    WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.
    
    You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:
    
      npm install --save [email protected]    npm install --save [email protected]
      yarn add [email protected]              yarn add [email protected]
    

    Reproducible Demo

    Bootstrap new project:

    react-native init MyProject
    cd MyProject
    yarn add -D haul
    yarn haul init
    yarn haul start -- --platform ios
    react-native run-ios
    

    Add missing packages:

    yarn add -D react-hot-loader react-dom
    

    Try again:

    yarn haul start -- --platform ios
    
    Unhandled JS Exception: Attempted to assign to readonly property.
    

    package.json:

    {
      "name": "MyProject",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest",
        "haul": "haul"
      },
      "dependencies": {
        "react": "16.8.3",
        "react-native": "0.59.4"
      },
      "devDependencies": {
        "@babel/core": "^7.4.3",
        "@babel/runtime": "^7.4.3",
        "babel-jest": "^24.7.1",
        "haul": "^1.0.0-rc.15",
        "jest": "^24.7.1",
        "metro-react-native-babel-preset": "^0.53.1",
        "react-dom": "^16.8.6",
        "react-hot-loader": "^4.8.4",
        "react-test-renderer": "16.8.3"
      },
      "jest": {
        "preset": "react-native"
      }
    }
    
    Reviewed by grahamlyus at 2019-04-17 00:01
  • 5. RN 0.49.3 crashed on Android

    Hi.

    I upgraded haul to 1.0.0-beta.6 due to breaking changes on iOS. Now, iOS is working fine, but Android will stop right after launching the app. When I change the version back to beta.5 everything works well on Android. On beta.6 I got messsage: GET /index.android.bundle 500 undefined - 4.247 ms

    Reviewed by jurajkrivda at 2017-10-12 09:57
  • 6. Make sure we work with Babel 7

    RN recently merged Babel 7 into master, which means v0.56 will probably get this โ€“ @grabbou correct me if I'm wrong. Would be good to make sure we support that (probably some documentation changes and installing [email protected] will do).

    Reviewed by thymikee at 2018-04-22 19:59
  • 7. Don't use deflate & better socket error handle

    I've discovered that we are using [email protected] which has the deflate option turned on by default. This issue is not actually about deflate but about maxPayload. (maxPayload error blown the zlib).

    This is supposed to be just a walk around because I'm still not sure how the size is computed thought.

    • My test project should be 42 633 230 byte. (this is in Haul's logs or when I dowload the bundle into file via wget -O bundle http://localhost:8081/index.ios.bundle or something)
    • Default maxPayload [email protected] is 104 857 600 byte. (https://github.com/websockets/ws/blob/2.2.0/lib/WebSocketServer.js#L46)
    • However, the ws claim that the bundle file is 144 242 145 byte (I had loged this in the context of very ws itself: https://github.com/websockets/ws/blob/2.2.0/lib/Receiver.js#L467).

    I have also created new branch where I'm going to upgrade ws to latest version https://github.com/callstack/haul/tree/jukben/ws-upgrade

    For context: https://github.com/websockets/ws/issues/1136

    Not sure if this issue could be related to memory-fs what we use.

    CLOSE #429

    Reviewed by jukben at 2018-05-22 15:25
  • 8. Unhandled JS Exception: Can't find variable self

    When I run "npm run haul start -- --platform ios", It's loading 100% and says you are ready to run. But after installing app through xcode, It's showing error as in image. I don't know what am I missing, But it's working fine in other systems with same versions I mentioned below

    img_0043

    Haul Configuration (webpack.haul.js)

    module.exports = ({ platform }, { module, resolve }) => ({
      entry: `./index.${platform}.js`,
      module: {
        ...module,
        rules: [
          {
            test: /\.json$/,
            loader: 'json-loader'
          },
          ...module.rules
        ]
      },
      resolve: {
        ...resolve,
        extensions: ['.json', ...resolve.extensions]
      }
    })
    
    

    Your Environment

    MAC

    | software | version | ---------------- | ------- | Haul | 1.0.0-beta.7 | react-native | 0.48.4 | node | 8.7.0 | npm or yarn | npm

    Reviewed by sunnymopada at 2018-01-05 07:15
  • 9. Get HMR running

    Get HMR up & running. If supported by default, we should make a flag --hot on a CLI. I believe that switch from Dev Tools is rather useless. All in all, you don't want to change it during development.

    Eventually we might want to change dev tools in Simulator as well (given that it's been recently allowed), but we will see.

    Reviewed by grabbou at 2017-03-23 09:29
  • 10. Error setTimeout after updating RN 0.60.4

    Environment

    "react-native": "0.60.4", "@haul-bundler/babel-preset-react-native": "0.9.0", "@haul-bundler/cli": "0.9.1", "@haul-bundler/core": "0.9.1", "@haul-bundler/preset-0.60": "0.9.0", "jsc-android": "241213.1.0", "@babel/core": "7.5.5", "@babel/polyfill": "7.4.4",

    babel config:

    module.exports = function(api) {
        api.cache.using(() => process.env.BABEL_ENV)
    
        return {
            presets: [
                "module:@haul-bundler/babel-preset-react-native",
            ],
            plugins: [
                "react-require",
                "lodash",
                "./babel-plugin-typescript-lazy-metadata",
                ["@babel/plugin-transform-runtime", {
                    helpers: true,
                    regenerator: false,
                }],
            ],
            compact: api.env("production")
        }
    }
    

    Description

    Timing native module is not available, can't set timers. This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. Make sure that you load a polyfill in older browsers.

    Reproducible Demo

    image

    Reviewed by isuhar at 2019-07-30 17:06
  • 11. HMR on Android: "TypeError: Attempting to change value of readonly property"

    Current Behavior

    I've followed the HMR setup guide and HMR on Android fails with TypeError: Attempting to change value of readonly property while trying to apply changes. Works totally fine on iOS.

    screenshot

    Expected Behavior

    Should just work like on iOS :)

    Haul Configuration (webpack.haul.js)

    const path = require('path')
    
    module.exports = ({ platform }, defaults) => ({
      entry: path.resolve('demo/'),
      resolve: {
        ...defaults.resolve,
        alias: {
          '~': process.cwd(),
        },
      },
    })
    

    Your Environment

    | software | version | ---------------- | ------- | Haul | v1.0.0-beta.13 | react-native | both 0.52.0 and 0.53.0 | node | 8.8.1 | yarn | 1.3.2

    Reviewed by deepsweet at 2018-02-15 08:58
  • 12. Add Missing Dependencies to @haul-bundler/babel-preset-react-native

    Summary

    Add missing dependencies @babel/plugin-transform-computed-properties to @haul-bundler/babel-preset-react-native.

    The following dependencies are used in @haul-bundler/babel-preset-react-native

    However they are not declared in the dependencies of package.json for @haul-bundler/babel-preset-react-native.

    I have encountered errors while trying to use this in a non-hoisted environment, and I believe this was working previously due to hoisting.

    Test plan

    This should not affect anything, the dependency was likely being resolved previously due to hoisting, and it is simply now being explicitly declared

    Reviewed by Stuart-Wilcox at 2022-03-09 23:27
  • 13. Haul server crashes when navigating to root url

    Environment

    I am on Windows and node v14.15.1, but it looks like this should apply everywhere

    Description

    When you run haul, you get the following message: done โ–ถ๏ธŽ Packager server running on http://localhost:8081 You can click on the link from the console, which opens localhost at the root This causes haul to crash

    I see three places to change that would each mitigate this

    1. Lowest level
    callback({
      errors: null,
      platform,
      file: fs.readFileSync(filePath),
      mimeType,
    });
    

    https://github.com/callstack/haul/blob/dc0b201a0355c0e1c0be897aa9e4586c7e9b2e89/packages/haul-core-legacy/src/compiler/Compiler.js#L149

    There needs to be error handling when reading a file. A simple try/catch that invokes callback with any errors would suffice

    1. Intermediate level
    if (fs.existsSync(filePath)) {
      send(Events.FILE_RECEIVED, {
        taskId: payload.taskId,
        filePath,
        mimeType: mime.lookup(payload.filename) || 'text/javascript',
      });
    } else {
      send(Events.FILE_NOT_FOUND, {
        taskId: payload.taskId,
      });
    }
    

    https://github.com/callstack/haul/blob/dc0b201a0355c0e1c0be897aa9e4586c7e9b2e89/packages/haul-core-legacy/src/compiler/worker/initWorker.js#L82

    existsSync returns true for directories, but there is no reason to send a directory path to the compiler. A check to ensure that the path is a file (e.g. with a call to statSync) would prevent this issue

    1. Highest level
    server.route({
        method: 'GET',
        path: '/{any*}',
        ...
    })
    

    https://github.com/callstack/haul/blob/dc0b201a0355c0e1c0be897aa9e4586c7e9b2e89/packages/haul-core/src/server/setupCompilerRoutes.ts#L46

    This sends every unknown path to the compiler, which is not desirable for the root

    Adding a simple redirect like the following to setupDevtoolRoutes.ts would catch this and help developers get to their expected destination

    server.route({
      method: 'GET',
      path: '/',
      handler: (_, h) => h.redirect('/debugger-ui')
    });
    

    Reproducible Demo

    This applies to every haul project

    Reviewed by michens at 2021-10-21 21:35
  • 14. update the lockfile to automatically remove the high severity vulnerability introduced in @haul-bundler/core

    Hi, @zamotany, I have reported a vulnerability issue in package terminal-kit.

    As far as I am aware, vulnerability(high severity) SNYK-JS-TREEKIT-1077068 detected in package tree-kit(<0.7.0) is directly referenced by ย [email protected], on which your package @haul-bundler/[email protected] directly depends. As such, this vulnerability can also affect @haul-bundler/[email protected] via the following path: @haul-bundler/[email protected] โž” [email protected] โž” [email protected](vulnerable version)

    Since terminal-kit has released a new patched version [email protected] to resolve this issue ([email protected] โž” [email protected](fix version)), then this vulnerability patch can be automatically propagated into your project only if you update your lockfile. The following is your new dependency path : @haul-bundler/[email protected] โž” [email protected] โž” [email protected](vulnerability fix version).

    dependency path

    A warm tip.^_^ Best regards,

    Reviewed by paimon0715 at 2021-08-20 08:16
  • 15. haul out of memory on reload

    Environment

    Binaries: Node: 12.16.3 - /var/folders/n3/x77mps511psc9z15lr2011dm0000gq/T/fnm_multishells/37908_1626302308407/bin/node Yarn: 1.22.5 - /var/folders/n3/x77mps511psc9z15lr2011dm0000gq/T/fnm_multishells/37908_1626302308407/bin/yarn npm: 6.14.4 - /var/folders/n3/x77mps511psc9z15lr2011dm0000gq/T/fnm_multishells/37908_1626302308407/bin/npm Watchman: 2021.06.07.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.1 - /Users//.gem/ruby/2.6.0/bin/pod SDKs: iOS SDK: Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2 Android SDK: API Levels: 28, 30 Build Tools: 28.0.3, 29.0.2, 30.0.3, 31.0.0 System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64 Android NDK: Not Found

    Description

    Looks like the webpack.SourceMapDevToolPlugin causes a crash with larger repositories. Adding the plugin webpack.EvalSourceMapDevToolPlugin resolves the issue. But the bundler takes longer since SourceMapDevToolPlugin is still required by haul to resolve certain links.

    Code changes to webpack config

    webpackconfig.plugins.push(new EvalSourceMapDevToolPlugin({
      exclude: /node_modules\/(?!(local_package1|local_package2|local_package3).*/,
    }))
    

    Reproducible Demo

    You need a lerna monorepo that is massive. That imports a lot of expensive components and maybe some that are not fully optimized for react-native.

    Reviewed by FrederickEngelhardt at 2021-07-16 16:12
  • 16. haul is not working on existing app

    Environment

    This is our applicaton https://github.com/pass-culture/pass-culture-app-native

    Description

    Installing as explained in the readme cause application error

    Would you mind help us know why this plugin is broken with our project? Thanks !

    Reviewed by kopax-polyconseil at 2021-04-21 13:51
  • 17. Crashing when launching Chrome debugger

    I have a Haul project, and am able to turn on debugging such that Haul launches Chrome and lets me debug. This is great.

    If instead I run my project in a VScode devcontainer, Chrome isn't available. Haul tries to launch Chrome, fails, and crashes:

    error โ–ถ๏ธŽ Error: spawn google-chrome ENOENT
        at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
        at onErrorNT (internal/child_process.js:456:16)
        at processTicksAndRejections (internal/process/task_queues.js:77:11) {
      errno: 'ENOENT',
      code: 'ENOENT',
      syscall: 'spawn google-chrome',
      path: 'google-chrome',
      spawnargs: [ 'http://mymachine:8081/debugger-ui' ]}
    

    Looking at launchBrowser.ts, it seems like it should print the URL to navigate to manually, which would be great. But maybe that code path isn't being triggered.

    Reviewed by endquote at 2021-02-10 19:39
React Native Share, a simple tool for share message and file to other apps.
React Native Share, a simple tool for share message and file to other apps.

React Native Share, a simple tool for share message and file to other apps.

May 16, 2022
Rename react-native app with just one command

react-native-rename Rename react-native app with just one command This package assumes that you created your react-native project using react-native i

May 15, 2022
Snoopy is a profiling tool for React Native, that lets you snoop on the React Native Bridge.
Snoopy is a profiling tool for React Native, that lets you snoop on the React Native Bridge.

React Native Snoopy UPDATE: I wrote an article with the story behind this library. Snoopy is a profiling tool for React Native, that lets you snoop on

Apr 25, 2022
A CLI tool built to ease your daily React Native development
A CLI tool built to ease your daily React Native development

React Starter GearboX - a CLI tool built to ease your daily React Native development. Rationale Inspired by the cordova tool and motivated by the, uhh

Feb 14, 2022
A platform to ease integration&delivery of React Native apps in existing mobile applications
A platform to ease integration&delivery of React Native apps in existing mobile applications

Electrode Native is a mobile platform that streamlines the integration of React Native components into existing mobile applications. With minimal chan

May 11, 2022
Gray box end-to-end testing and automation framework for mobile apps
Gray box end-to-end testing and automation framework for mobile apps

Detox Gray box end-to-end testing and automation library for mobile apps. What Does a Detox Test Look Like? This is a test for a login screen, it runs

May 17, 2022
rn-native-hash - Simplified native dependency tracking for React Native

rn-native-hash - Simplified native dependency tracking for React Native rn-native-hash strives to make it easier to keep track of when the native depe

Jan 27, 2022
Google Analytics for React Native! Compatible with react-native-ab

react-native-google-analytics is no longer maintained ?? Check out expo-firebase-analytics for universal React support (iOS, Android, web, & Electron)

Apr 25, 2022
react-native-webp adds support for WebP images for react-native components.

react-native-webp adds support for WebP images for react-native components. Installation npm install react-native-webp --save rnpm link (or manually a

Jun 3, 2021
Create responsive styles that use media query on react native web and Dimensions API on react native.

Create responsive styles that use media query on react native web and Dimensions API on react native.

May 10, 2022
Shared event emitter between native and JS for React Native.
Shared event emitter between native and JS for React Native.

react-native-global-event-emitter Shared event emitter between native and JS for React Native. Uses iOS NotificationCenter and RN DeviceEventEmitter t

Mar 9, 2022
An HTTP network request monitor for React Native with in-app interface for iOS and Android with no native code
An HTTP network request monitor for React Native with in-app interface for iOS and Android with no native code

react-native-network-logger An HTTP traffic monitor for React Native including in app interface. An alternative to Wormholy but for both iOS and Andro

May 8, 2022
Synchronize native modules state by computing a digest of the ios/ and android/ directories in a React Native project.

native-modules-lock Synchronize native modules state by computing a digest of the ios/ and android/ directories in a React Native project. Usage Usage

Dec 5, 2021
The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools
The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools

React Native Debugger Run the redux example of react-navigation with Redux DevTools setup This is a standalone app for debugging React Native apps: Ba

May 10, 2022
:iphone: React Native Package Manager
:iphone: React Native Package Manager

Dear friends, Last November me (@Kureev) and Mike (@grabbou) started RNPM. We aimed to bring you a better developer experience and bridge the tooling

May 6, 2022
A react native module that lets you to register a global error handler that can capture fatal/non fatal uncaught exceptions.
A react native module that lets you to register a global error handler that can capture fatal/non fatal uncaught exceptions.

react-native-exception-handler A react native module that lets you to register a global error handler that can capture fatal/non fatal uncaught except

May 17, 2022
React Native in Ruby
React Native in Ruby

Opal Native - React Native in Ruby JavaScript is an implementation detail. -- Why React Native Matters Motivation To provide a Ruby-friendly tool chai

Apr 16, 2022
:pencil2: A collection of React Native snippets for Sublime Text and Atom

[Looking for Maintainer] react-native-snippets A collection of React Native snippets for Sublime Text and Atom. These snippets use ES6/7 syntax. Insta

Apr 15, 2022
See what packages are increasing your react-native bundle size ๐Ÿ“ฆ
See what packages are increasing your react-native bundle size ๐Ÿ“ฆ

react-native-bundle-visualizer See what's inside of your react-native bundle ?? Uses the awesome source-map-explorer to visualize the output of the Me

May 10, 2022