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 [email protected] 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): https://github.com/facebook/react-native/issues/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:

https://github.com/callstack/haul/blob/0747fd41b94603900c8759511ca18f7c9e2e03ee/packages/haul-core/src/utils/importModule.ts#L89

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 [email protected], at least as far as the Hello World demo goes. Really happy to see this working!