volto icon indicating copy to clipboard operation
volto copied to clipboard
verified publisher icon plone

Toolbar Types crashes when language code not in langmap

Open ravi-aman opened this issue 1 month ago • 9 comments

Bug Report: Toolbar Types crashes when language code not in langmap

Describe the bug

The Toolbar Types component crashes with TypeError: Cannot read properties of undefined (reading 'nativeName') when trying to display translation options for content in a multilingual site. This occurs when Plone's configured available languages include a language code that is not defined in Volto's LanguageMap.

The error prevents users from interacting with the "Add Translation" feature in the toolbar, causing the entire UI to crash with an error overlay.

To Reproduce

Steps to reproduce the behavior:

  1. Configure Plone with a language not in Volto's langmap:

    • Go to 'Site Setup' → 'Language Settings' (or http://localhost:3000/controlpanel/language)
    • Add a language that exists in Plone but not in Volto's LanguageMap
    • Example: fr-ht (Haitian French/Creole)
    • Save the language settings

  2. Install multilingual support:

    • Go to 'Site Setup' → 'Add-ons' (http://localhost:3000/controlpanel/addons)
    • Install plone.app.multilingual addon
    • Wait for installation to complete

  3. Create any content:

    • Navigate to site root or any folder
    • Click 'Add' button in the toolbar
    • Create a Document (or any content type)
    • Fill in title: "Test Content"
    • Save the content

  4. Trigger the error:

    • Click on the content item you just created
    • Click the 'Add' button in the toolbar (top-right corner)
    • Observe the "Add Translation…" section trying to render
    • See error overlay appear immediately

Expected behavior

The toolbar should handle missing language codes gracefully:

  1. The "Add Translation" menu should display successfully
  2. For languages not in the langmap, it should:
    • Either display the language code itself (e.g., "Translate to fr-ht")
    • Or display a fallback name
    • Or skip/hide unavailable languages
  3. The UI should NOT crash
  4. Users should be able to continue working with available languages

Screenshots

Error Overlay:

×
←→1 of 2 errors on the page
TypeError: Cannot read properties of undefined (reading 'nativeName')
(anonymous function)
src/components/manage/Toolbar/Types.jsx:98
   95 |     id="Translate to {lang}"
   96 |     defaultMessage="Translate to {lang}"
   97 |     values={{
>  98 |       lang: langmap[lang].nativeName.toLowerCase(),
      | ^   99 |     }}
  100 |   />
  101 | </Link>

Full Stack Trace:

TypeError: Cannot read properties of undefined (reading 'nativeName')
    at Types (http://localhost:3001/static/js/client.js:96505:3)
    at ConnectFunction (http://localhost:3001/static/js/client.js:185763:103)
    at div
    at div
    at Toolbar (http://localhost:3001/static/js/client.js:95834:5)
    at ConnectFunction (http://localhost:3001/static/js/client.js:185763:103)
    at CookieWrapper (http://localhost:3001/static/js/client.js:136870:51)
    at withCookies(Connect(Toolbar))
    at injectIntl(withCookies(Connect(Toolbar)))
    at div
    at View (http://localhost:3001/static/js/client.js:112678:5)
    at ConnectFunction (http://localhost:3001/static/js/client.js:185763:103)
    at injectIntl(Connect(View))
    at Route (http://localhost:3001/static/js/client.js:188891:29)
    at Switch (http://localhost:3001/static/js/client.js:189097:29)
    ...

Error Page:

Sorry, something went wrong with your request 
Cannot read properties of undefined (reading 'nativeName')
Image Image

Software (please complete the following information):

  • OS: Windows 11 / Linux
  • Browser: Brave 142.0.0.0 (Chromium-based) / Chrome / Firefox / Safari (all browsers affected)
  • Volto Version: 19.0.0-alpha.13 (also confirmed in main branch)
  • Plone Version: 6.0.13
  • Plone REST API Version: Latest (included in Plone 6.0.13)
  • Node Version: (your Node version)
  • Package Manager: pnpm 10.20.0

Additional context

Root Cause Analysis

File: packages/volto/src/components/manage/Toolbar/Types.jsx
Line: 98

Problematic Code:

<FormattedMessage
  id="Translate to {lang}"
  defaultMessage="Translate to {lang}"
  values={{
    lang: langmap[lang].nativeName.toLowerCase(),  // ❌ CRASHES HERE
  }}
/>

Why it crashes:

  • The code assumes langmap[lang] always exists
  • When plone.available_languages includes a language code (e.g., fr-ht) that is not defined in packages/volto/src/helpers/LanguageMap/LanguageMap.js
  • langmap[lang] returns undefined
  • Attempting to access .nativeName on undefined causes the crash

Verification

Confirmed this is NOT related to any local changes:

# Check if Types.jsx was modified
git diff main..HEAD -- packages/volto/src/components/manage/Toolbar/Types.jsx
# Output: (empty) - confirming the bug exists in main branch

Affected Language Codes

This issue affects any language configured in Plone but missing from Volto's LanguageMap, including:

  • fr-ht (Haitian French/Creole) - confirmed in my case
  • Many regional language variants
  • Minority/indigenous languages
  • Custom language codes added to Plone

Tested Scenario

Backend Configuration (confirmed via API):

{
  "plone.available_languages": [
    "en",
    "fr-ht"  // ← This language is not in Volto's langmap
  ],
  "plone.default_language": "en"
}

Volto LanguageMap Check:

# Search for fr-ht in langmap
grep -i "fr-ht" packages/volto/src/helpers/LanguageMap/LanguageMap.js
# Exit code: 1 (not found)

Impact

  • Severity: Medium-High
  • User Impact: Complete UI crash when trying to use multilingual features
  • Workaround: Remove unsupported languages from Plone's language settings (not ideal)
  • Affected Users: Multilingual sites using languages not in Volto's hardcoded langmap

Proposed Fix

Use optional chaining with a fallback to prevent the crash:

Option 1 - Defensive with fallback:

lang: langmap[lang]?.nativeName?.toLowerCase() || lang,

Option 2 - Explicit checking:

lang: langmap[lang] 
  ? langmap[lang].nativeName.toLowerCase() 
  : lang,

Option 3 - Filter out unavailable languages:

const translationsLeft = filter(
  availableLanguages,
  (lang) =>
    langmap[lang] &&  // ← Add this check
    !Boolean(
      content['@components'].translations &&
        find(content['@components'].translations.items, {
          language: lang,
        }),
    ) && toBackendLang(currentLanguage) !== lang,
);

Related Issues

  • This is different from #7309 (which was about content.language.token)
  • Should check other components using langmap for similar unsafe access patterns
  • Consider making the langmap more extensible or providing a way to register custom languages

ravi-aman avatar Nov 19 '25 04:11 ravi-aman

I an working on this issue

pratyush07-hub avatar Nov 19 '25 13:11 pratyush07-hub

Hi 👋,

I’ve investigated the issue and identified the root cause. The crash occurs when langmap[lang] is undefined for languages configured in Plone but not present in Volto’s LanguageMap, causing a TypeError when accessing .nativeName.

I have a proposed fix ready, which safely falls back to the language code if the language is missing from the map:

lang: langmap[lang]?.nativeName?.toLowerCase() || lang.toLowerCase()

This prevents the UI crash and preserves full translation functionality.

Could you please assign this issue to me? I’d like to submit a PR with the fix, add a defensive filter for missing languages, and include tests to prevent future regressions.

Thanks! 🙏

Prerna2024-cyber avatar Nov 20 '25 14:11 Prerna2024-cyber

@ravi-aman I see you pushed a commit, but did not create a pull request. You, @pratyush07-hub, and @Prerna2024-cyber should read and follow First-time contributors, especially Things not to do, Contributing to Plone, and Contributing to Volto.

stevepiercy avatar Nov 20 '25 19:11 stevepiercy

Hi @stevepiercy,

Thanks for the guidance. I had pushed an initial commit because it solved the primary issue in my testing. However, while re-checking today, I identified a few additional edge cases related to missing languages in langmap, so the fix is not fully complete yet.

That’s why I haven't opened a final PR. I'm working on covering all remaining cases and will submit a proper PR following the contribution guidelines.

ravi-aman avatar Nov 20 '25 19:11 ravi-aman

Is anyone working on this issue?

pratyush07-hub avatar Dec 02 '25 16:12 pratyush07-hub

@pratyush07-hub it's been two weeks since I gave the usual advice in https://github.com/plone/volto/issues/7637#issuecomment-3559636915 and there has been no further progress reported by those individuals I tagged. It's fine to use your judgment about whether to proceed.

That said, this issue has not been triaged or verified yet by a second person. I'd suggest that you try to reproduce it first and verify that it is in fact an issue.

stevepiercy avatar Dec 03 '25 06:12 stevepiercy

@pratyush07-hub it's been two weeks since I gave the usual advice in #7637 (comment) and there has been no further progress reported by those individuals I tagged. It's fine to use your judgment about whether to proceed.

That said, this issue has not been triaged or verified yet by a second person. I'd suggest that you try to reproduce it first and verify that it is in fact an issue.

Ok, I will verify it first, and then start working on it.

pratyush07-hub avatar Dec 03 '25 14:12 pratyush07-hub

Hi @stevepiercy, I have tried reproducing issue locally and confirmed that it is still happening. When a language exists in Plone but is missing in Volto’s langmap (e.g., fr-ht), the toolbar crashes while rendering the “Add Translation…” menu. Attached is a screenshot showing the error: Cannot read properties of undefined (reading 'nativeName').

Image

I can now start working on a fix to safely handle missing languages.

pratyush07-hub avatar Dec 03 '25 18:12 pratyush07-hub

If I add fr-ht to the available languages, install plone.app.multilingual, and access the portal via SSR, I get another error beforehand:

TypeError: Cannot read properties of undefined (reading 'nativeName')
    at /home/user/git/volto/packages/volto/@plone/volto/src/components/theme/LanguageSelector/LanguageSelector.tsx:66:1
    at Array.map (<anonymous>)
    at LanguageSelector (/home/user/git/volto/packages/volto/build/webpack:/@plone/volto/src/components/theme/LanguageSelector/LanguageSelector.tsx:58:1)
    at renderWithHooks (/home/user/git/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderIndeterminateComponent (/home/user/git/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5735:15)
    at renderElement (/home/user/git/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/home/user/git/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/user/git/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/home/user/git/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderChildrenArray (/home/user/git/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6215:7)

This other error also needs to be fixed.

wesleybl avatar Dec 05 '25 02:12 wesleybl