Navigator is not defined

[amelongo]

I'm using expo and whenever I test your library in android or ios, everything works fine;

however, when I do this on expo web, I get the error: navigator is not defined

The code that fails is on: node_modules/react-native-international-phone-number/lib/styles.js wherever the below section exists:

Platform.OS === 'web'
        ? navigator?.userAgent?.includes('Win')
          ? 'TwemojiMozilla'
          : 'System'
        : 'System',

Can you please assist how I can configure your plugin to also run on expo web without crashing?

Thanks

[AstrOOnauta]

Hey @amelongo can you send me more info? What browser are you uising? Because I test in Google Chrome, Edge and Safari, and work fine here...

[amelongo]

The part that I'm implementing is: a. Advanced Usage: React-Hook-Form + Typescript + Default Phone Number Value b. My code is:

 `<Controller
                      name="phone"
                      control={control}
                      render={({ field: { onChange, value } }) => (
                        <PhoneInput
                          value={value}
                          onChangePhoneNumber={onChange}                             
                          onChangeSelectedCountry={handleSelectedCountry}
                          selectedCountry={country? getCountryByCca2(country) : undefined}
                        />
                      )}
                      />`

c. I use expo and I have no issue on the android or ios emulator. However, when I test the web with chrome, I get the error, Payment.tsx, is my component:

                 `Call Stack
                  factory
                  node_modules/react-native-international-phone-number/lib/styles.js
                  loadModuleImplementation
                  node_modules/metro-runtime/src/polyfills/require.js
                  guardedLoadModule
                  node_modules/metro-runtime/src/polyfills/require.js
                  _$$_REQUIRE
                  node_modules/metro-runtime/src/polyfills/require.js
                  factory
                  node_modules/react-native-international-phone-number/lib/index.js
                  loadModuleImplementation
                  node_modules/metro-runtime/src/polyfills/require.js
                  guardedLoadModule
                  node_modules/metro-runtime/src/polyfills/require.js
                  _$$_REQUIRE
                  node_modules/metro-runtime/src/polyfills/require.js
                  factory
                  components/Payment.tsx`

  d. In explorer I get the error:

             `Unable to resolve module ./node_modules/react-native-international-phone-number/lib/assets/fonts/TwemojiMozilla.woff2 from C:\Users\melon\OneDrive - APIE Project\Documents\APIE\Code\ReactNative-Ashantix\ashantix-app\components\Payment.tsx`

I imported the font exactly as instructed: import { useFonts } from 'expo-font'; And in the code, I did declare the font as: const [loaded] = useFonts({ 'TwemojiMozilla': require('./node_modules/react-native-international-phone-number/lib/assets/fonts/TwemojiMozilla.woff2'), });

 e. finally, the expo version I'm using is:  **"expo": "~51.0.14",**

If there are any other info you need from me, please let me know. We can also schedule a time to do a live demo.

Thanks

[AAndonio]

I was having the same issue and resolved changing

    "web": {
      ...
      "output": "single", //was static
      ...
    }, 

in my app.json

[AstrOOnauta]

Thanks for this @AAndonio . I will add this specification to the documentation.

@amelongo this point solves your problem?

[amelongo]

I will go ahead and make the change and since I have no problem anymore, I'll close this issue.

Thanks for your help.

[PierreCapo]

@AstrOOnauta @amelongo I think we need to reopen this issue. Changing the web deployment type is a workaround, but a big decision in terms of product and tech that shouldn't depend on this kind of UI component.