Lingui usage in Rails React project

[mofmn]

This is only really a request for documentation solving this issue. I didn't think it right to report it as a bug, as it is more that the setup instructions aren't working for my use case.

I have followed the instructions in my Rails project that implements a lot of react code on the front end (eventually i foresee the entire front end will become a React project with just a rails backend.) I would therefore like to handle internationalisation via React rather than Rails.

When running extract i get a lot of `Cannot process file Cannot find module '@babel/plugin-syntax-dynamic-import' errors and no effect from extract other than creating the relevant file structure (but empty, regardless of trans components)

I presume because the setup of .linguirc is incorrect, but i have tried many combinations and have not managed to get it to work.

My current .linguirc

{ "locales": ["en", "jp"], "catalogs": [{ "path": "app/javascript/locales/{locale}/messages", "include": ["app/javascript/components"] }], "format": "po" }

Interestingly the errors do not occur when "include":["src"] is left unchanged as written in the docs, but obviously it doesn't find any of the trans components either.

Thanks in advance.

[semoal]

There are some plugins which are mandatory to make Lingui work since Babel it's the responsible under the hood of transforming the code to AST and read where are the macros. (also built on top of babel)

https://lingui.js.org/tutorials/setup-react.html

Make sure you have installed @babel/core and babel-plugin-macros as devDependencies.

Also If you use this syntax:

export async function dynamicActivate(locale: string) {
  const { messages } = await import(`./locales/${locale}/messages`)
  i18n.load(locale, messages)
  i18n.activate(locale)
}

import() it's a proposal and isn't ready in all the browsers yet, so you have to install too: @babel/plugin-syntax-dynamic-import

If you're using Creact-React-App all these plugins are installed of out of the box, so probably could be an issue of Lingui.

[mofmn]

So, after some fiddling, it seems i had to use this command to add all the various parts of babel that it was missing (just the core and macros did not seem sufficient, as i tried those first) -

yarn add --dev @babel/preset-env @babel/preset-react @babel/core @babel/cli @babel/plugin-proposal-class-properties @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime

Not certain every one was necessary, but after having to manually add 2 or 3 i found that command to pull them all in (from here https://support.checkmarx.com/s/article/Using-Yarn ) and then after altering the babel config to remove the plugins:[" macros"] line (which seemed to be causing duplicates that were causing errors), yarn extract now seems to find the messages, but produces a lot of warnings of this kind: Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties. The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding ["@babel/plugin-proposal-private-methods", { "loose": true }] to the "plugins" section of your Babel config.

I have not yet fully explored this, or figured out whether lingui is 100% working at this point, but seems like progress. I dont really know what the loose option is, so don't know how much impact silencing this warning will have.

[mofmn]

So i had this line in my babel config: plugins: [ '@babel/plugin-proposal-class-properties', { loose: true } ],

in my babel config, changing it to false removed all the warnings, but i am unaware of the impact of this setting.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.