Logo

    ©ゆとりちゃれんじ

    GitHubXInstagram
    ExpoでSupabaseを使った時にハマった話

    ExpoでSupabaseを使った時にハマった話

    はじめに

    ゆとり世代の中野です。

    さっそくチャレンジについて書いていきます。

    チャレンジする背景

    • Webでは動くがNativeでは動かないが発生した

    チャレンジ内容

    • やっと解決できたので忘備録として残しておく

    やったこと

    • 症状
      • スプラッシュスクリーンで止まったまま
    ‣
    エラー内容
    • 原因
      • URL.hostname is not implement
      • ReactNativeがURL.hostname などの URL オブジェクトの一部のプロパティやメソッドを全てのバージョンでサポートされていないのが原因
    • 対応
      • パッケージを追加する
        • yarn add react-native-url-polyfill
      • URLを使う場所にimportする
        • import 'react-native-url-polyfill/auto';

    結論

    • これでwebと同様にsupabaseを扱えるようになりました

    さいごに

    • ReactNativeくんさー、君webの技術でしょ。URL Objectぐらい標準でサポートしてよ。
    • あと言いたいことはいっぱいあるけどもうちょいエラーメッセージどうにかならん？

    yutanakano

    WEBエンジニア

    大阪生まれのゆとり世代です

    趣味はバイクでツーリングに行くこと

    愛車は Ninja ZX-25R SE KRT EDITION

    Expoでプロダクトを作っています

    image
    Error: URL.hostname is not implemented, js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:237:40 in guardedLoadModule
at node_modules/metro-runtime/src/polyfills/require.js:131:23 in metroRequire
at http://192.168.86.121:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:216888:3 in global

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
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
- ... 7 more stack frames from framework internals

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
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
- ... 7 more stack frames from framework internals