The Babel-core module not working with Lingui

Question

I am new to the concept of Localizing my react-application. After doing some research online, It seems as if jsLingui is the best library to use and implement translation on my React application. Following tutorials from https://lingui.js.org/tutorials/react.html , everything seems pretty straight forward. but when I run the command

$ lingui extract , I get the error :

module.js:557 throw err; Error: Cannot find module 'babel-core' at Function.Module._resolveFilename (module.js:555:15) at Function.Module._load (module.js:482:25) .....

I have tried re-installing the babel-core , and it shows installed. Even when I check on my file system, I see the folder as node_modules/babel-core . I also checked my package.json and I see "babel-core": "^6.26.3" as part of my devDependencies. Please any ideas around this will be helpful.

Beside, the pressing question, I also have a few other questions;

1) In the documentation, I am not sure on where to keep .babelrc file created. I hope it is suppose to be inside my babel-core folder.

2) When I was reading on the jslingui library, I discover that, they are still working on something that will help separate translations to be done page by page. I do not know whether this task is completed or still under development because, I am really interested in this one since my application really big and loading the whole translation at all times might become a real issue.

3) What if I have text in one part of my application which is exactly the same as in another part of my application, is it possible to write it in one section and call the id in another part to give me back the information?? or it is out of scope of the library .

4) I am building a social platform therefore I have information coming from the DB, which I do not know the content therefore such information can not be translated using jslingui just as it is. I will like to introduce some translation to this information( similar to what is happening on Facebook). I know this task needs some serious Artificial intelligence in the areas of natural language processing and machine learning. Please, Any good library that I can use to help my application translate only the portions of data provided to it( definitely information coming from DB)??. I have tried googling on this but I got nothing concrete( NB: I do not want Google Translate because, It will help to translate the whole page + names etc) which will mess-up the user experience of my application

jslingui

Thanks

Answer 1

I have tried re-installing the babel-core , and it shows installed. Even when I check on my file system, I see the folder as node_modules/babel-core . I also checked my package.json and I see "babel-core": "^6.26.3" as part of my devDependencies. Please any ideas around this will be helpful.

If you've installed @lingui/cli globally, please remove it and reinstall locally. If you use Babel 7 (your plugins/preset start with @babel/), then you need to install babel-core@^7.0.0-bridge.0 and @babel/core. Both locally as devDependencies. What also helped in some cases is good old turn it off and on again: rm -rf node_modules and reinstall everything...

1) In the documentation, I am not sure on where to keep .babelrc file created. I hope it is suppose to be inside my babel-core folder.

You should keep it in the root of your repository (next to package.json) unless you have specific needs.

2) When I was reading on the jslingui library, I discover that, they are still working on something that will help separate translations to be done page by page. I do not know whether this task is completed or still under development

It's still under development. However, it's a bit different - it helps you create separate message files, but not automatically. That's something we need to solve in further versinons.

3) What if I have text in one part of my application which is exactly the same as in another part of my application, is it possible to write it in one section and call the id in another part to give me back the information?

You have two options. Either you're using generated message IDs:

// App.js
<Trans>Hello World</Trans>

// Component.js uses the same message
<Trans>Hello World</Trans>

In this case, you only need to translate Hello World once, because messages are grouped when collected from source files.

Other option is that you're using custom IDs:

// App.js - define message
<Trans id="msg.hello">Hello World</Trans>

// Component.js - use message
<Trans id="msg.hello" />

4) I am building a social platform therefore I have information coming from the DB, which I do not know the content therefore such information can not be translated using jslingui just as it is. ...

I can't recommend any approach here, but it seems you need to use a machine translation. Either Google Translate or a better one, if you manage to find it. My guess it'll be either low-quality or expensive because as you said, this isn't a trivial task.