Presets for RN 0.61+? #755

Activity

1. sayzenberg

   added

   question

   on Aug 18, 2020
2. hanayashiki commented on Jan 28, 2021

   

   hanayashiki

   on Jan 28, 2021

   More actions

   this repo seems dead
3. thymikee commented on Jan 28, 2021

   

   thymikee

   on Jan 28, 2021

   Member

   More actions

   no it's not :)
4. hanayashiki commented on Jan 28, 2021

   

   hanayashiki

   on Jan 28, 2021

   More actions

   no it's not :)

   Glad to hear that, but I haven't noticed any official support for RN 0.63?
5. shirakaba commented on Feb 16, 2021

   

   shirakaba

   on Feb 16, 2021

   Last edited by shirakaba

   More actions

   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
6. shirakaba commented on Feb 16, 2021

   

   shirakaba

   on Feb 16, 2021

   Last edited by shirakaba

   More actions

   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!