React-admin: translation is broken ?

Created on 14 Mar 2019  路  22Comments  路  Source: marmelab/react-admin

What you were expecting:
native ra-language need to show translation not the keys.

What happened instead:
All keys "ra.**" are not traducted

// in App.js
const messages = {
    fr: frenchMessages,
    en: englishMessages,
    de: germanMessages,
    it: italianMessages,
};
const i18nProvider = locale => messages[locale];

if (!localStorage.getItem('locale')){
    localStorage.setItem('locale', resolveBrowserLocale());
}

[...]

render() {
        return (
            <Admin
                locale={localStorage.getItem('locale')}
                appLayout={CustomLayout}
                i18nProvider={i18nProvider}
                customReducers={{ theme: themeReducer }}
                dashboard={Dashboard}
                menu={Menu}
                customRoutes={customRoutes}
                authProvider={authProvider}
                dataProvider={dataProvider}
            >



// in i18n/fr.js

// import frenchMessages from 'ra-language-french'; // don't work
import frenchDashboardMessages from './fr/DashboardMessages' // ok all is translated
import frenchGlobalMessages from './fr/GlobalMessages' // ok all is translated
import frenchMenuMessages from './fr/MenuMessages' // ok all is translated
import frenchConfigurationViewMessages from './fr/ConfigurationViewMessages' // ok all is translated
import frenchMessages from './fr/RaMessages' // don't work copy of ra-language-french

export default {
    ...frenchMessages,
    ...frenchDashboardMessages,
    ...frenchGlobalMessages,
    ...frenchMenuMessages,
    ...frenchConfigurationViewMessages,
    resources: {
        [...]
    }
}

Other information:
linked to #3000

got the same problem.

clear navigator cache -> no effect
rm -rf node_modules -> no effect.
npm cache rm -> no effect
rm -rf ~/.npm/* -> no effect
rm -rf ~/.cache/* -> no effect
rm -rf ~/.yarn/* -> no effect

sudo npm install -g npm -> updated but no effect
sudo npm install -g yarn -> updated but no effect

try to lunch with npm start or yarn start and nothing seemes to work...

Environment

  • React-admin version: 2.8.1
  • Last version that did not exhibit the issue (if applicable): 2.7.1
  • React version: 16.8.2
  • Browser: all
  • Stack trace (in case of a JS error): no js error
needs more info

Most helpful comment

I can confirm this happened to me after updating to 2.8.5 and was fixed by removing package-lock.json, node_modules and running npm install.

All 22 comments

If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:

  • CodeSandbox (https://codesandbox.io/s/349ovjmlx5)
  • A sample application via GitHub

well... today i redo a yarn start and everything seems to be ok...

damn... that is strange... can't explain except a npm/yarn cache conflict maybe ? i can't reproduce it on codesandbox.

so... it's ok for me, i will reopen for the next update if i have the same problem.

thx guys

I have this bug reproducible on Heroku deployment.

Everything is ok on local deployment via dev server or Express, but when application builded on heroku (and run on Express) - I see this "ra.navigation.page_rows_per_page" and others "ra.XXX...YYY" macros everywhere, where I did't set Labels hardcoded, i.e. in every component added on view under hood.

image

image

Again, please provide us with a way to reproduce the bug, otherwise we won鈥檛 be able to troubleshoot it.

I'm having the same issue after upgrading from version 2.7.1 => 2.8.2

Updating to 2.8.3 fixed this issue.

I am having this exact same problem after updating from 2.6.2 to 2.8.3. Please re-open the issue as it is not yet solved in 2.8.3.

deleting node_modules + npm install does not solve the issue.

@mrwatts we still can't reproduce the bug. Please provide a codesandbox and we'll reopen this issue.

@fzaninotto I cannot reproduce it in a codesandbox either.

Like I said, deleting node_modules + npm install did not solve the issue.
However, this did:

  • npx create-react-app some-new-app-name
  • npm install react-admin
  • copy sources (all but node_modules) from old app to new app
  • npm install

So I got it back working. Problem solved for me. Above procedure might work for others with same issue too.

Translations not working happened to me also when upgrading react-admin to 2.8.5.

Removing node_modules and package-lock.json, then npm install solved the issue.

Translations not working happened to me also when upgrading react-admin to 2.8.5.

Removing node_modules and package-lock.json, then npm install solved the issue.

Did npm update react-admin --depth 10 today to upgrade from 2.8.3 to 2.8.5. Had the issue again. Above fix resolves the issue.

I can confirm this happened to me after updating to 2.8.5 and was fixed by removing package-lock.json, node_modules and running npm install.

as @te-online said it solved our issue when deleting yarn.lock and then doing yarn install

I have the same issue. Just updated to version 2.9.3 from 2.9.1. And have this
https://yadi.sk/i/NLJD9cNwTVcYwA
Update1. I tried remove folder node_modules and npm i
Update2. I rolled back to ver 2.9.2 and it didn't help. Then I noticed I have "ra-data-json-server": ^2.9.1, I changed it to 2.9.3 and react-admin to ^2.9.3, made npm i. And pabaaaam, it works))

I can confirm this happened to me after updating to 2.8.5 and was fixed by removing package-lock.json, node_modules and running npm install.

@BorislavARC Did you try this suggestion?

I can confirm this happened to me after updating to 2.8.5 and was fixed by removing package-lock.json, node_modules and running npm install.

@BorislavARC Did you try this suggestion?

No. I didn't try

2.9.6 and I suddenly have this error... same exact code on another machine works perfectly. It can't be reproduced easily. I also tried a lot of deleting as said in the previous comments, but to no avail! Really weird bug that lost me several productive hours.

@saysmaster maybe you upgraded only react-admin and not other ra- packages (like ra-language-english or ra-data-jsonserver), which results in duplicated translation calls, and only one would have the translation.

I removed everything and I added dependencies of react-admin with the versions react-admin requires and it works ok now.

EDIT : _Sorry i didn't know that, i will delete my message soon
Here's my StackOverflow post : https://stackoverflow.com/questions/60391967/understanding-react-admin-translation_

I have a question, how is this working ?

I tried some of your tips unsuccesfully, i still had the non-referenced keys ra.*...

The thing that solved my problem was to change this :

const messages = { 'fr': frenchMessages, };

TO

const messages = { 'en': frenchMessages, };

And YES this is the only thing that i need to change to get the polyglot working (French traduction).

Can someone explain me what's going on with that ? Wasted couple of hours just on that point.

Thank you in advance.

@DiSiZz Please use StackOverflow to ask "how to" questions - this tracker is only for bugs.

I'll be so rude to add: If you edit your message above with the Stack Overflow link, I'll try and look into your question 馃槉

Was this page helpful?
0 / 5 - 0 ratings