nhostreact0.14.2 breaks my Expo React Native (Hermes) app

[comontes]

After upgrading from @nhost/react@0.14.1 to @nhost/react@0.14.2 my Expo React Native(Hermes) app is broken with the following error:

› Metro waiting on com.name.app://expo-development-client/?url=http%3A%2F%2F192.168.0.121%3A8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
Android Bundling complete 3659ms
Error: ENOENT: no such file or directory, open '/Users/username/ts-lingo/unknown'
    at Object.openSync (node:fs:599:3)
    at Object.readFileSync (node:fs:467:35)
    at getCodeFrame (/Users/username/ts-lingo/node_modules/metro/src/Server.js:1028:18)
    at Server._symbolicate (/Users/username/ts-lingo/node_modules/metro/src/Server.js:1101:22)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Server._processRequest (/Users/username/ts-lingo/node_modules/metro/src/Server.js:458:7) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/username/ts-lingo/unknown'
}
 ERROR  SyntaxError: 159790:11:Invalid regular expression: Quantifier has nothing to repeat, js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

[plmercereau]

Maybe related
facebook/hermes#46

[pkreipke]

Link to OG Discord thread ...

[comontes]

"Invalid regular expression: Quantifier has nothing to repeat, js engine: hermes" is solved by the @babel/plugin-transform-named-capturing-groups-regex Babel plugin.

Step 1:
yarn add --dev @babel/plugin-transform-named-capturing-groups-regex

Step 2:
Add plugin in babel.config.js
Mine looks like this:

Step 3:
restart the development server and clear the bundler cache with: npx expo start --clear, or in my case npx expo start --dev-client --clear (I'm using dev-client)

Result:

Sadly, there are still errors caused by the upgrade of the Nhost React library v 0.14.2

[comontes]

"ERROR TypeError: Restricted in strict mode, js engine: hermes" seems to come from the use of axios@^1.1.3 by Nhost.
See Axios bug here: axios/axios#4998

[comontes]

Ok, using Yarn "Selective dependency resolutions" I forced my project to use "axios@1.2.0-alpha.1".

Step 1: changed my package.json with

Step 2: Followed Expo docs to clean all caches https://docs.expo.dev/troubleshooting/clear-cache-macos-linux/

I ran:
rm -rf node_modules
yarn cache clean
yarn
npx expo start --dev-client --clear

Step 3: No errors!

So Axios is the main problem. And the Regex thing but that is solved by the plugin.

[plmercereau]

We're getting more and more tired of Axios at Nhost, maybe it's time to plan our project related to cross-fetch, @nunopato
About the regexp we'll look for a way to adapt it to please Hermes - from what i gather he's not the kind of god you're messing with 😬

[seyaobey-dev]

@plmercereau In my expo react native app, I have upgraded to latest version of @nhost/nhost-js:^1.6.2 and @nhost/core:^0.9.4 (build fails if this lib is not present). But eas build is still failing with error:

[stderr] /home/expo/workingdir/build/android/app/build/generated/assets/react/release/index.android.bundle:182830:9: error: Invalid regular expression: Quantifier has nothing to repeat
[stderr]     G = /^((?<protocol>http[s]?):\/\/)?(?<host>localhost)(:(?<port>(\d+|__\w+__)))?$/;

But if I disable hermes and revert to jsc engine then it passes. Not sure if it is still related to above issue.

[plmercereau]

@seyaobey-dev could you try the solution suggested by @comontes?

[seyaobey-dev]

@plmercereau thanks for the suggestion. The build past with the use of @babel/plugin-transform-named-capturing-groups-regex babel plugin.

[Svarto]

Ran into same issue, the Babel transformer works solution works for now