Presets for RN 0.61+?

[sayzenberg]

Ask your Question

React Native is currently on version 0.63, but the most recent preset package for Haul is for 0.60. Are there any new presets needed/planned for the newer RN version?

[hanayashiki]

this repo seems dead

[thymikee]

no it's not :)

[hanayashiki]

no it's not :)

Glad to hear that, but I haven't noticed any official support for RN 0.63?

[shirakaba]

My setup

I just tried building a fresh react-native@0.63.4 project using the latest haul:

    "@haul-bundler/babel-preset-react-native": "^0.16.0",
    "@haul-bundler/cli": "^0.22.1",
    "@haul-bundler/preset-0.60": "^0.18.0",

The closest available preset is preset-0.60:

$ yarn haul init
yarn run v1.22.4
$ /Users/jamie/Downloads/MyProject/node_modules/.bin/haul init
ℹ @haul-bundler/preset-0.63 not available. Trying older version...
ℹ @haul-bundler/preset-0.62 not available. Trying older version...
ℹ @haul-bundler/preset-0.61 not available. Trying older version...
ℹ Using Haul preset: @haul-bundler/preset-0.60

Successful native build

The react-native/rn-get-polyfills.js for v0.63 is unchanged from the polyfills introduced by haul-preset-0.60, which is a good start.

The native app builds successfully (provided I disable Flipper or change the version range for it, which is an ongoing React Native issue for macOS, and not related to Haul).

Runtime error

However, once the app starts up and executes the JS bundle, it presents a red error box at run-time:

Unhandled JS Exception: Unexpected token '{'. import call expects exactly one argument.

no stack

Based on that error output, I guess it's finding a static import, i.e. import { SomeDependency } from "some-library";, whilst expecting a dynamic import, i.e. const SomeDependency = await import("module-name");:

(But I could be wrong. Either way, it's something to do with imports/modules).

Of note, others have experienced this exact issue in regular RN projects, so maybe it's not necessarily a haul problem, but I've yet to try their solutions (which all look a bit unlikely): react/react-native#24094

But otherwise, I wonder if something about module loading needs to be changed in the default config.

Finally, I just noticed that the React Native CLI seems to have generated a JS project for me rather than a TS one. I'll try a TS one later to see whether it gets any further. Got to go for now, though!

EDIT: Disregard the runtime error above. Looks like I simply missed the instruction to run the development server, which obviously won't have helped things:

npx haul start

[shirakaba]

Trying again, this time with the development server actually running.

First build succeeds and runs successfully

I should note that I receive a deprecation warning from packages/haul-core/src/utils/importModule.ts using the createRequireFromPath() API from the module library:

haul/packages/haul-core/src/utils/importModule.ts

Line 89 in 0747fd4

const currentResolve = ((Module.createRequireFromPath(

info ▶︎ Compiling bundle "index" for platform ios
error ▶︎ (node:58284) [DEP0130] DeprecationWarning:
Module.createRequireFromPath() is deprecated. Use Module.createRequire()
instead.
at loadModule (/Users/jamie/Downloads/MyProject/node_modules/@haul-bundler/cor
e/build/utils/importModule.js:78:42)
at importModule (/Users/jamie/Downloads/MyProject/node_modules/@haul-bundler/c
ore/build/utils/importModule.js:32:19)
at getNormalizedProjectConfigBuilder
(/Users/jamie/Downloads/MyProject/node_modules/@haul-bundler/core/build/config
/getNormalizedProjectConfigBuilder.js:22:40)
at runWebpackCompiler (/Users/jamie/Downloads/MyProject/node_modules/@haul-bun
dler/core-legacy/build/compiler/worker/runWebpackCompiler.js:44:69)
at WebSocket.<anonymous> (/Users/jamie/Downloads/MyProject/node_modules/@haul-
bundler/core-legacy/build/compiler/worker/initWorker.js:40:24)
at WebSocket.emit (events.js:314:20)
at WebSocket.setSocket
(/Users/jamie/Downloads/MyProject/node_modules/ws/lib/websocket.js:177:10)
at ClientRequest.<anonymous>
(/Users/jamie/Downloads/MyProject/node_modules/ws/lib/websocket.js:671:15)
at ClientRequest.emit (events.js:314:20)

... but disregarding that log message, it does build (can't remember how long the cold build took, but the warm build took only around 10 seconds) and run:

Upon file changes, no HMR (as expected) nor automatic live reload, but the bundle does update

Upon saving a change to App.js, no HMR occurs (as expected – this is mentioned on the README), but the haul dev server does update its compilation progress bar, indicating that it has noticed the file change.

I had hoped that, even if HMR weren't supported, live reload would occur upon code changes – it seems that this is not the case, however.

Pressing Cmd + R to manually force a live reload does work just fine, however, and the app reloads its bundle in a second. You can see the request for /index.bundle in the development server's logs. Really cool to see that I can easily request the bundle myself with http://localhost:8081/index.bundle?platform=ios.

So as far as I can tell, Haul is fully functioning for react-native@0.63.4, at least as far as the Hello World demo goes. Really happy to see this working!