Adding locales with only one locale inside with same key of the country breaks app navigation

[davidegiovanni]

Expected Behavior

Adding a single locale inside a country in /utils/i18n.ts, both with the same key, such as

export const locales: Record<string, Record<string, string>> = {
  `it: { it: "Italiano (Italia)"},`
};

should make me navigate to the correct localized route.

Current Behavior

When a single-locale country object is added, when clicking on the link to change language, the page breaks and the following error message is displayed: Unexpected Server Error Error: Objects are not valid as a React child (found: Error: Cannot read properties of undefined (reading 'split')). If you meant to render a collection of children, use an array instead.

The console says TypeError: Cannot read properties of undefined (reading 'split') and the part where the error tends to show up is the anchor with the recommended locale url link in root.tsx:

<a href={recommendedLocaleUrl}>{`Switch to ${
      recommendedLocale.split("-")[0] === currentLocale.split("-")[0]
        ? locales[recommendedLocale.split("-")[1]][
            recommendedLocale.split("-")[0]
          ]
            .split("(")[1]
            .split(")")[0]
            .trim()
        : recommendedLocale.split("-")[1] ===
          currentLocale.split("-")[1]
        ? locales[recommendedLocale.split("-")[1]][
            recommendedLocale?.split("-")[0]
          ].split("(")[0]
            .trim()
        : locales[recommendedLocale.split("-")[1]][
            recommendedLocale.split("-")[0]
          ]
    } →`}</a>

Steps to Reproduce

1. Go to utils/i18n.ts and add it: { it: "Italiano (Italia)"}, to the locales
2. Run npm run dev
3. From the index page, click the link of the newly added language

Context (Environment)

I discovered this issue while trying to add also Italian translations to a website I am building with Remix.run
My setup is the following:

"@remix-run/node": "^1.4.1",
"@remix-run/react": "^1.4.1",
"@remix-run/vercel": "^1.4.1",
"@types/accept-language-parser": "^1.5.3",
"@vercel/node": "^1.14.0",
"accept-language-parser": "^1.5.0",
"autoprefixer": "^10.4.4",
"cross-env": "^7.0.3",
"nodemon": "^2.0.15",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.12",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^3.0.24"
"@remix-run/dev": "^1.4.1",
"@remix-run/eslint-config": "^1.4.1",
"@remix-run/serve": "^1.4.1",
"@types/react": "^17.0.24",
"@types/react-dom": "^17.0.9",
"eslint": "^8.11.0",
"typescript": "^4.5.5"

• Node version: v16.13.2
• MacBook Pro (Retina, 13-inch, Early 2015) 2,7 GHz Dual-Core Intel Core i5
• MacOS Version: 12.1

[davidegiovanni]

I tried to add a little undefinedcheck also on the Switch to anchor as follow:

BEFORE

<a href={recommendedLocaleUrl}>{`Switch to ${
  recommendedLocale.split("-")[0] === currentLocale.split("-")[0]
    ? locales[recommendedLocale.split("-")[1]][
        recommendedLocale.split("-")[0]
      ]
        .split("(")[1]
        .split(")")[0]
        .trim()
    : recommendedLocale.split("-")[1] ===
      currentLocale.split("-")[1]
    ? locales[recommendedLocale.split("-")[1]][
        recommendedLocale?.split("-")[0]
      ].split("(")[0]
        .trim()
    : locales[recommendedLocale.split("-")[1]][
        recommendedLocale.split("-")[0]
      ]
} →`}</a>

AFTER

<a href={recommendedLocaleUrl}>{`Switch to ${
  recommendedLocale.split("-")[0] === currentLocale.split("-")[0]
    ? locales[recommendedLocale.split("-")[1]][
        recommendedLocale.split("-")[0]
      ]
        .split("(")[1]
        .split(")")[0]
        .trim()
    : recommendedLocale.split("-")[1] ===
      currentLocale.split("-")[1]
    ? locales[recommendedLocale.split("-")[1]][
        recommendedLocale?.split("-")[0]
      ]?.split("(")[0]
        .trim()
    : locales[recommendedLocale.split("-")[1]][
        recommendedLocale.split("-")[0]
      ]
} →`}</a>

And the problem seems solved

[AnandChowdhary]

I think the problem is that this assumes that the locale will look like "languagecode-countrycode", i.e., "it-it" instead of simply "it". I was very opinionated since I was building for countries with the same language in different regions, like "de-ch" (German in Switzerland) and "de-de" (German in Germany). So I think if you just change the locale to "it-it", the split("-")[1] should stop throwing an error. I'll fix this in the meantime!