Metro Error (WEB): Cannot read properties of undefined (reading 'languageCode')

[Dimitri Hartt]

This error is only visible on WEB. Android is working fine.

Using npm: 20.12.1 (Iron)
I used these options: Typescript 5.3.3, NativeWind, React Router, Internationalization, Drawer + Tabs.

Expected Behavior

To see the initial app working on Firefox.

Current Behavior

It comes to a Error page that says:
Log 1 of 1
Static Rendering Error (Node.js)
Cannot read properties of undefined (reading 'languageCode')
Source: (languageDetector.ts)
const locales = Localization.getLocales();
const firstLanguageCode = locales[0].languageCode ?? 'en';
^
return firstLanguageCode;

Possible Solution

I think that is why I use nordvpn and preffer not to share my location via browser...

Steps to Reproduce

1. npx create-expo-stack
2. choose: typescript, npm 10.5.0, NativeWind, React Router, Internationalization, Drawer + Tabs.
3. npm i
4. npm run start

Possible Implementation

I think use the 'us' when it comes undefined.

[Dimitri Hartt]

Other important thing that I forgot to mention is that if you choose internationalization, in your app.json, it comes with "plugins" repeated:

"plugins": ["expo-router"],
....
"plugins": ["expo-localization"],

And if I manage to fix to:

"plugins": ["expo-router", "expo-localization"],

It still does not work.

[Dimitri Hartt]

It may be relevant: error on Problems VS Tab says:
file: tsconfig.json (node_modules)/expo-localization (1)
File 'expo-module-scripts/tsconfig.base' not found.

I have fixed this not-found error by runing: ctrl+shif+p and typing Typescript: Restart TS Server.

And still cant make the app work.

[dan]

@dimitrihartt I'll take a look this week but just an FYI, create expo stack isn't really optimized for web at all. It's meant to rapidly iterate on mobile app stuff. Appreciate the detailed issue though.

[Dimitri Hartt]

Thanks in advance @danstepanov! That will be great. I'm still trying to accomplish this end here! Count on me! And thanks for the great and valuable work on CES!

A possible solution would be the use of LanguageDetectorAsyncModule instead of LanguageDetectorModule... what do you think?

[dan]

i can look into that, not sure but if you want to try opening a PR, it would be greatly appreciated. I am largely focusing on NativeWindUI.com this week.

[Dimitri Hartt]

Hey my friend @danstepanov!I f you wish I have a PrintScreen I took now...

[Dimitri Hartt]

I fixed:
npm install i18next-browser-languagedetector
and changed file:
languageDetector.ts

import { Platform } from 'react-native';
import * as Localization from 'expo-localization';
import { LanguageDetectorModule } from 'i18next';
import browserLanguageDetector from 'i18next-browser-languagedetector';

export const languageDetector: LanguageDetectorModule = {
type: 'languageDetector',
detect: () => {
if (Platform.OS !== 'web') {
const locales = Localization.getLocales();
const firstLanguageCode = locales[0].languageCode ?? 'en';
return firstLanguageCode;
} else {
return browserLanguageDetector.name;
}
},
init: () => {},
cacheUserLanguage: () => {},
};