Unable to change language of Volto core

[wesleybl]

Describe the bug
I change the language setting to pt-br but the interface remains in English. I also tried with es and it didn't work.

To Reproduce
Steps to reproduce the behavior:

1. Change the settings in:

volto/packages/volto/src/config/index.js

Lines 122 to 123 in 38844e5

	supportedLanguages: ['en'],
	defaultLanguage: 'en',

To:

 supportedLanguages: ['pt-br'], 
 defaultLanguage: 'pt-br', 

2. Access the login url:

http://localhost:3000/login

with an anonymous user.

3. Note that the login form is in English.

Expected behavior
The login form must be in Portuguese

Software (please complete the following information):

Volto 18.0.0-alpha.41
Plone 6.0.11
plone.restapi 9.7.0
CMF 3.5
Zope 5.9
Python 3.11.9 (main, May 14 2024, 08:32:26) [GCC 10.2.1 20210110]
PIL 9.5.0 (Pillow)

[stevepiercy]

Did you follow Multilingual, specifically:

You need to install Multiligual support in Plone (plone.app.multilingual add-on), that comes available by default since Plone 5 and can be installed in Plone's control panel.

[wesleybl]

@stevepiercy but I don't want a multilingual website. I want the website to be in only one language different of English.
The steps in the issue description used to work. Something broke.

By the way, I don't know if this option I'm looking for is in the documentation.

[stevepiercy]

@wesleybl OK, thanks for the explanation. However, would you please try installing that add-on to see if it resolves the issue? I suspect it is a backend dependency for translations in Volto.

This option is documented in the Multilingual docs to which I linked and which contain steps similar to what you followed. If I recall correctly, you need to install it even in Classic UI to get a non-English language. I could be wrong, though.

Finally Volto has the required pt-br messages at https://github.com/plone/volto/tree/main/packages/volto/locales/pt_BR/LC_MESSAGES, so we can rule that out as a possible cause.

[wesleybl]

@stevepiercy I installed plone.app.multilingual and set the isMultilingual setting to true. But that didn't solve the problem. Also, the url http://localhost:3000/pt-br gave an error:

This page does not seem to exist…

[wesleybl]

I printed the intl.locale variable and the value was en. In other words, intl.locale is not receiving the value from the configuration.

[wesleybl]

However, would you please try installing that add-on to see if it resolves the issue? I suspect it is a backend dependency for translations in Volto.

@stevepiercy the pt-br folder was not created as I tested. That's why I was getting a content not found error. I created a new Plone site and the pt-br folder was created. From then on, with the installation of plone.app.multilingual, the translation worked at the url http://localhost:8080/Plone/pt-br. But there's something strange. In the past, it was not necessary to have a multilingual site, to have a portal in a language other than English.

[davisagli]

In the past, it was not necessary to have a multilingual site, to have a portal in a language other than English.

It should still not be necessary, if you only need to support one language. Did you remember to also set the site language correctly in the backend?

[wesleybl]

Did you remember to also set the site language correctly in the backend?

Yes I set the backend language. I tried with Portuguese and Spanish but neither worked.

[wesleybl]

The problem originated in PR #6130 by @sneridagh. In it, the Languages.js file was renamed to Languages.cjs. It seems that Volto treats .cjs files as static resources. I printed the languages variable:

volto/packages/volto/src/server.jsx

Line 39 in 3c56a14

import languages from '@plone/volto/constants/Languages.cjs';

and the result was the string:

http://localhost:3001/static/media/Languages.ea358519.cjs

instead of the object like languages:

volto/packages/volto/src/constants/Languages.cjs

Lines 6 to 22 in 502c0f7

	module.exports = {
	ca: 'Català',
	de: 'Deutsch',
	en: 'English',
	es: 'Español',
	eu: 'Euskara',
	fi: 'Suomi',
	fr: 'Français',
	hi: 'Hindi',
	it: 'Italiano',
	nl: 'Nederlands',
	ro: 'Română',
	ja: '日本語',
	pt: 'Português',
	pt_BR: 'Português (Brasil)',
	zh_CN: '中文',
	};

The question is, can I rename it to Languages.js?

CC @ichim-david

[ichim-david]

The problem originated in PR #6130 by @sneridagh. In it, the Languages.js file was renamed to Languages.cjs. It seems that Volto treats .cjs files as static resources. I printed the languages variable:

volto/packages/volto/src/server.jsx

Line 39 in 3c56a14

import languages from '@plone/volto/constants/Languages.cjs';

and the result was the string:

http://localhost:3001/static/media/Languages.ea358519.cjs

instead of the object like languages:

volto/packages/volto/src/constants/Languages.cjs

Lines 6 to 22 in 502c0f7

	module.exports = {
	ca: 'Català',
	de: 'Deutsch',
	en: 'English',
	es: 'Español',
	eu: 'Euskara',
	fi: 'Suomi',
	fr: 'Français',
	hi: 'Hindi',
	it: 'Italiano',
	nl: 'Nederlands',
	ro: 'Română',
	ja: '日本語',
	pt: 'Português',
	pt_BR: 'Português (Brasil)',
	zh_CN: '中文',
	};

The question is, can I rename it to Languages.js?

CC @ichim-david

@wesleybl awesome debugging, this is what I like about your way of adding issues, you are thorough and it's great that you found where the issue came from.
It would be interesting to see if we can fix this treatment of language.cjs since @sneridagh has issues with the ESM bundlers (vite in this case).
If we can't make it work then perhaps we will need to revert this change but for now let's treat it as a bug needed to be fixed.

[wesleybl]

@ichim-david since we don't have a type in Volto's package.json, CommonJs modules can have the .js extension:

https://nodejs.org/api/modules.html#enabling

In other words, it is not mandatory for CommonJs modules to have the cjs extension.

I changed it to js and it worked. So I ask again if I can do this.

[davisagli]

@wesleybl I am not sure you are on the right track. The following steps work for me:

1. Change supportedLanguages to ['pt-br'] and defaultLanguage to 'pt-br' in packages/volto/src/config/index.js
2. Start backend with make backend-docker-start
3. Start volto with make start
4. Go to http://localhost:8080/manage, log in and delete the Plone site that was created with its language set to en
5. Add a new Plone site with the language set to pt-br
6. Go to http://localhost:3000/login --> it's in Portuguese, as expected

So I think the problem is that the Docker backend creates an English site, and there isn't a way to configure that. (The docker image can be configured with the LANGUAGE environment variable, but volto's Makefile isn't setting that for the docker-backend-start command.)

[stevepiercy]

@wesleybl with the tip from @davisagli, can you try editing the Makefile with this:

# Volto development
LANGUAGE      ?=en

...

.PHONY: backend-docker-start
backend-docker-start: ## Starts a Docker-based backend for development
	$(MAKE) -C "./packages/volto/" backend-docker-start -e $(LANGUAGE)

Then invoke it with:

make backend-docker-start LANGUAGE=pt-br

My syntax might be off, but maybe you can fiddle with it to get it right.

If it works, then should we add this feature and document it?

[wesleybl]

So I think the problem is that the Docker backend creates an English site

@davisagli that was the problem. It worked by recreating the site. Thanks!

But anyway, the Languages.cjs problem persists. And renaming it to Languages.js works even with the site in English. Maybe Volto is making "some extra effort" to get around the Languages.cjs problem.

I have a portal that is in Portuguese and after updating the Volto version, it stopped translating the strings. I thought that would be the problem, but apparently it isn't.

[wesleybl]

If it works, then should we add this feature and document it?

@stevepiercy @davisagli now that we have a volume for the backend, I don't know if it would make sense to have this configuration. We would have to remember to use it the first time we use the make command. After that, I don't think it would do anything else, since the portal would already be created.

[wesleybl]

@davisagli the strange thing is that recreating the portal works, but when we change the language in http://localhost:3000/controlpanel/language, all the content already created when the portal was in English is still shown in English, even with the portal in Portuguese. That's what confused me.

[wesleybl]

In other words, the content language takes precedence over the portal language. This might make sense, but when we test it, it seems like the language change doesn't work.

[davisagli]

Yes, the content language takes precedence over the portal language. It doesn't make a lot of sense and there's been a fair amount of discussion of changing it, but that hasn't happened yet.

[wesleybl]

In classic Plone, the portal language takes precedence.

[wesleybl]

Can I close this issue and open a specific one for Languages.cjs?

[davisagli]

@wesleybl Sure -- but I don't want to lose Steve's idea to provide a way to start the backend in Docker with a particular language. I think that would be good to support.

[stevepiercy]

@davisagli I looked for LANGUAGE in https://6.docs.plone.org/install/containers/images/backend.html, but it doesn't exist. It exists at https://github.com/plone/plone-backend/blob/a875020cd5abf06c33ebf635a784c32314787889/skeleton/scripts/create_site.py#L38. Should those docs include these environment variables as well?

[stevepiercy]

I created a PR in #6231 that captures #6219 (comment). Feel free to do what you want with this issue.

[ichim-david]

@davisagli @wesleybl I have tried several solutions to get Languages.cjs object to import and work both in webpack and vite and I couldn't get it to work.
I left a comment to Victor here #6130 (comment) where I suggest we revert the change unless someone with more knowledge can get this setup to work as right now we have a regression that we should deal with and worry about Vite compatibility when that solution matures to the point where we can drop the webpack and razzle setup we have.

[wesleybl]

@davisagli recreating the portal in Portuguese solves the problem on most pages. But on some pages we still have problems. For example, on the content not found page in SSR. If you access a page with no content, the message is in English. Rename Languages.cjs solves this problem.

[davisagli]

recreating the portal in Portuguese solves the problem on most pages. But on some pages we still have problems. For example, on the content not found page in SSR.

@wesleybl I was able to reproduce that. I think this will help: #6237