Metro Error (WEB): Cannot read properties of undefined (reading 'languageCode')
dimitrihartt opened this issue · comments
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
- npx create-expo-stack
- choose: typescript, npm 10.5.0, NativeWind, React Router, Internationalization, Drawer + Tabs.
- npm i
- npm run start
Possible Implementation
I think use the 'us' when it comes undefined.
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.
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.
@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.
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?
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.
Hey my friend @danstepanov!I f you wish I have a PrintScreen I took now...
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: () => {},
};