You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Thanks for writing next-intl. I'm working on a Next.js/MUI/Typescript site page which allows a user to select the continent, country, and region in which they live and their date of birth. The architecture includes a server component and a client container component which hosts two child client components. The architecture looks like this:
This architecture is needed because, UserLocation and UserAge contain interactive MUI components. In addition, UserLocation and UserAge are displayed sequentially which require useEffect.
What I've Tried
Since UserLocation and UserAge have separate localization segments in messages/en.json, I wrapped the PrivacyClientContainer in a NextIntlClientProvider using the "Providing all messages" approach. I also tried wrapping UserLocation and UserAge in their own NextIntlClientProviders in the PrivacyClientContainer using the "Providing individual messages" approach. In both cases, I included an array of keys as constants. (I also use NextIntlClientProvider in layout.tsx for error messages.)
{/* List Of Continents */}
{userLocationKeys.map((location) => (
<Box key={location.id} (Error: Property 'id' does not exist on type '"Asia" | "Africa" | "Europe" | "North-America" | "South-America" | "Australia/Oceania"'.)
<ListItemButton
onClick={() => {
handleContinentClick(location.id); (Same error as above)
}
>
( The same error is displayed when I map through through countries.)
{location.countries.map((country: Country) => (Error on countries)
)
Localization Structure
The context of this error may be associated with the UserLocation localization structure in messages/en.json.
"userLocation": {
"Asia": {
"id": number,
"continentName: string,
"countries": [
{
"id": number,
"countryName": string,
"childAge": number,
"regions": [
{
"id": number,
"regionName": string,
"childAge": number
}
}
}
Accessing translations in server components works fine. Perhaps I've made a mistake with NextIntlClientProvider. I've worked on this for a week and would appreciate some help.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Thanks for writing next-intl. I'm working on a Next.js/MUI/Typescript site page which allows a user to select the continent, country, and region in which they live and their date of birth. The architecture includes a server component and a client container component which hosts two child client components. The architecture looks like this:
ContactUs.tsx (server component)
|
PrivacyClientContainer.tsx (client container component)
|
UserLocation.tsx UserAge.tsx
This architecture is needed because, UserLocation and UserAge contain interactive MUI components. In addition, UserLocation and UserAge are displayed sequentially which require useEffect.
What I've Tried
Since UserLocation and UserAge have separate localization segments in messages/en.json, I wrapped the PrivacyClientContainer in a NextIntlClientProvider using the "Providing all messages" approach. I also tried wrapping UserLocation and UserAge in their own NextIntlClientProviders in the PrivacyClientContainer using the "Providing individual messages" approach. In both cases, I included an array of keys as constants. (I also use NextIntlClientProvider in layout.tsx for error messages.)
Code Abstract
const userLocationKeys = [
"Asia", "Africa", "Europe", "North-America", "South-America", "Australia/Oceania"] as const;
{/* List Of Continents */}
{userLocationKeys.map((location) => (
<Box key={location.id} (Error: Property 'id' does not exist on type '"Asia" | "Africa" | "Europe" | "North-America" | "South-America" | "Australia/Oceania"'.)
<ListItemButton
onClick={() => {
handleContinentClick(location.id); (Same error as above)
}
>
( The same error is displayed when I map through through countries.)
{location.countries.map((country: Country) => (Error on countries)
)
Localization Structure
The context of this error may be associated with the UserLocation localization structure in messages/en.json.
"userLocation": {
"Asia": {
"id": number,
"continentName: string,
"countries": [
{
"id": number,
"countryName": string,
"childAge": number,
"regions": [
{
"id": number,
"regionName": string,
"childAge": number
}
}
}
Project Setup
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.11",
"@mui/material": "^5.15.11",
"@mui/material-nextjs": "^5.15.7",
"@mui/x-date-pickers": "^6.19.7",
"date-fns": "^3.3.1",
"lodash": "^4.17.21",
"next": "14.1.0",
"next-intl": "^3.5.4",
"next-video": "^0.8.6",
"react": "^18.2.0",
"react-dom": "^18",
"typescript": "^5.3.3"
},
"devDependencies": {
"@types/lodash": "^4.14.202",
"@types/node": "^20",
"@types/react": "^18.2.66",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.1.0"
}
Accessing translations in server components works fine. Perhaps I've made a mistake with NextIntlClientProvider. I've worked on this for a week and would appreciate some help.
Beta Was this translation helpful? Give feedback.
All reactions