Using Volto in Brazilian Portuguese crash when access "Page not found 404"

[claytonc]

Describe the bug

Error when accessing a non-existent URL in the browser, when the language code is pt-br, the "404 Not Found page" is not displayed and crash frontend.

When select language code en, the "404 Not Found page" is displayed.

To Reproduce

Steps to reproduce the behavior:

1. Create a Volto project:

cookiecutter gh:collective/cookiecutter-plone-starter

project_title [Project Title]: 
project_slug [project-title]: 
description [A new project using Plone 6.]: 
author [Plone Foundation]: 
email [collective@plone.org]: 
python_package_name [project_title]: 
plone_version [6.0.3]: 
volto_version [16.18.0]: 
volto_generator_version [6.3.0]: 
Select language_code:
1 - en
2 - de
3 - es
4 - pt-br
Choose from 1, 2, 3, 4 [1]: 4
github_organization [collective]:
...

2. Start backend and volto.

Proxying API requests from http://localhost:3000/++api++ to http://localhost:8080/Plone
🎭 Volto started at 0.0.0.0:3000 🚀
[React Intl] Missing message: "skiplink-main-content" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "skiplink-navigation" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "skiplink-footer" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Site" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Plone Site" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Plone Site" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Open menu" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Open menu" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Search" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Search Site" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Search" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Search" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Breadcrumbs" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Home" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Copyright" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends." for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Plone{reg} Open Source CMS/WCM" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Plone Foundation" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Distributed under the {license}." for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "GNU GPL license" for locale: "pt-BR", using default message as fallback.
[React Intl] Missing message: "Powered by Plone & Python" for locale: "pt-BR", using default message as fallback.

3. Access for example http://localhost:3000/abc in the browser
4. See error

   RangeError: Incorrect locale information provided
   at Function.supportedLocalesOf (<anonymous>)
   at /home/user/project-title/frontend/node_modules/intl-locales-supported/src/index.ts:45:23
   at Array.every (<anonymous>)
   at Object.areIntlLocalesSupported [as default] (/home/user/project-title/frontend/node_modules/intl-locales-supported/src/index.ts:43:27)
   at createIntl (/home/user/project-title/frontend/node_modules/react-intl/dist/components/provider.js:65:42)
   at new IntlProvider (/home/user/project-title/frontend/node_modules/react-intl/dist/components/provider.js:88:19)
   at processChild (/home/user/project-title/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3305:14)
   at resolve (/home/user/project-title/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
   at ReactDOMServerRenderer.render (/home/user/project-title/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
   at ReactDOMServerRenderer.read (/home/user/project-title/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
   sswp> !!! Script exited with code 1

Expected behavior I hope the "display a 404 Not Found page" is displayed.

Software (please complete the following information):

• OS: Ubuntu 22.04
• Browser chrome
• Volto Version 16.18.0
• Plone Version 6.0.3
• Plone REST API Version 8.35.3

[claytonc]

Work with the following changes:

1. copy volto/constants/Laguages.js to folder customizations and alter pt_BR to 'pt-BR':

/**
 * Languages.
 * @module constants/Languages
 */

module.exports = {
  en: 'English',
  de: 'Deutsch',
  nl: 'Nederlands',
  ro: 'Română',
  ja: '日本語',
  pt: 'Português',
  'pt-BR': 'Português (Brasil)',
  es: 'Spanish',
  it: 'Italian',
  eu: 'Euskara',
};

2. change pt-br to pt-BR in frontend/config.js file

  config.settings = {
    ...config.settings,
    isMultilingual: false,
    supportedLanguages: ['pt-BR'],
    defaultLanguage: 'pt-BR',
  };

[wesleybl]

This is related to https://github.com/plone/volto/issues/3786

[claytonc]

This is related to #3786

Two problems, both related to the pt_BR language:

1 - causes duplicate API requests - reported by you; 2 - crash when accessing "Page not found 404" - reported by me;

But the second problem is more serious where it leaves the site unavailable.

[sneridagh]

@claytonc @wesleybl @ericof

I tried to reproduce it in vanilla Volto: 1.- config:

config.settings.supportedLanguages = ['pt-BR']; config.settings.defaultLanguage = 'pt-BR';

2.- Go to the control panel, set Brasilian Portuguese as default and supported in Languages.

3.- Check Volto:

Tried also with the cookiecutter, and I saw that the wizard is generating pt-br (in lowercase), which @ericof, we would have to address. The rest, all is good, no duplicated requests. @claytonc why are you changing the constants? You should not have to do that.

[wesleybl]

@sneridagh yes. Using pt-BR instead of pt-br in the Volto configuration solves the problem of duplicate requests. See my comments on #3786. But I have two questions:

• The documentation gives the example of pt-br. This needs to be fixed as it is misleading.
• The I18N_LANGUAGE cookie is recorded as pt_BR. After reading, it is converted back to pt-BR. I wonder if we couldn't record the cookei already with pt-BR, to avoid so many conversions.

[sneridagh]

@wesleybl I think there was a limitation, I can't remember on which side. So Plone uses the dashed identifier (this is needed for multilingual sites), so it should be like this, and cannot be changed, then LC_MESSAGES and react-intl uses the lowercase_uppercase format, and the solution was to transform (there is a helper for it: https://github.com/plone/volto/blob/master/src/helpers/Utils/Utils.js#L183) one to another in runtime.

I don't know if it's feasible use all lowercases (with dash) from the LC_MESSAGES and react-intl point of view (I think that the answer was that we can't). We can't change how Plone does things with the cookie either, since that would be breaking a lot of things and internals from Plone itself... So I think we are quite handcuffed in this one, I'm afraid.

However, feel free to investigate and try to find a better solution. Maybe @robgietema can also weigh in on this one.

[claytonc]

@sneridagh

Changing the constants from "pt_BR" to "pt-BR" was necessary to solve the problem of a Volto site stopping working after a page not found ( 404 error). This problem did not occur in previous versions of the Volto.

Also, changing "supportedLanguages" and "defaultLanguage" to "pt-BR" was necessary for the translations to work correctly. Translations made in our addons were not working in pt_BR on Volto.

[claytonc]

Changing:

1.- configuration: config.settings.supportedLanguages ​​= ['pt-BR']; config.settings.defaultLanguage = 'pt-BR';

2.- go to the control panel, set Brasilian Portuguese as default and supported in Languages.

3.- and access the url for example http://localhost:3000/abc, the following error occurs and it is not displayed on the page not found, but this time the site is not down.

"RangeError: Incorrect locale information provided"

4.- adding 'pt-BR': 'Português (Brasil)' to the constants (Laguages.js), access http://localhost:3000/abc, page not found is displayed.

5.- changing a setting and the constants: config.settings.supportedLanguages ​​= ['pt-br']; config.settings.defaultLanguage = 'pt-br';

6.- access http://localhost:3000/abc, page not found in English displayed.

[davisagli]

I've attempted to fix this in https://github.com/plone/volto/pull/4741 -- note that pt-br is the format expected in volto config.