Js-lingui: Cannot find module 'babel-core'

[sedubois]

Describe the bug
I followed the React tutorial instructions to add js-lingui to my Gatsby v1 app (including npm install --global babel-core@^7.0.0-0 @babel/core), but when running lingui extract I get Cannot find module 'babel-core'.

I'm very rusty with Node development so I might have misunderstood something!

To Reproduce
See this repo. yarn + gatsby develop works, the app runs as expected, but I get the above error when running lingui extract to regenerate the message catalog.

Expected behavior
lingui extract should succeed.

Additional context
lingui --version: 2.4.1

$ npm list babel-core @babel/core
[email protected] /Users/sdubois/Repos/lingui-babel-debug
├── @babel/[email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
├─┬ [email protected]
│ └── [email protected]  deduped
└─┬ [email protected]
  ├── [email protected]  deduped
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └─┬ [email protected]
          └── [email protected]  deduped

$ npm list -g babel-core @babel/core
/usr/local/lib
├── @babel/[email protected]
└── [email protected]

[tricoder42]

Could you please try to remove global babel-core and @babel/core? yarn global remove babel-core @babel/core

I do get an error, when these packages are installed globally, but a different one. I had to install @babel/env and replace static render render property with a function, but after that lingui extract works fine (both installed globally and locally, npx lingui extract)

[sedubois]

OK thanks, removing the global packages seems to have "fixed" it, now the command npx lingui extract runs.

But it picks Babel 6 for some reason even though I'm specifying Babel 7 in my package.json. If I use in my Babel configuration a preset like @babel/preset-react (Babel 7 name) instead of just react (Babel 6 name), then I get the error Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3".

Would you have an idea why? The Lingui documentation also only refers to the "react" preset name, even though on the other hand it suggests that both Babel 6 and 7 are supported.

I've pushed the latest config changes to the repo. NB: to get the setup to work with Gatsby, some specific configuration is needed. For instance Gatsby's .cache dir needs to be excluded (either by not putting it in srcPathDirs or by putting it in srcPathIgnorePatterns lingui configuration options), otherwise lingui extract throws some unrecognized syntax errors. In some ideal future it would be nice if less guesswork was needed to come up with the right Gatsby + Babel + Lingui configuration.

[tricoder42]

Absolutely. This could be documented in GatsbyJS + jsLingui tutorial and later we can add it to lingui init command, so it recognizes GatsbyJS project automatically.

I'll take a look again on Babel issue.

[sedubois]

It would also be awesome if lingui “just worked” and didn’t need any special Babel config but inferred the Babel config it needs from what’s already in the NPM/Gatsby config.

[tricoder42]

Could you please write down everything what's necessary to setup to use GatsbyJS with jsLingui? That would be a great starting point. Either create a new file in tutorials or write a summary here. Any help appreciated!

@lingui/cli already detects create-react-app and adds react-app to babel presets. We could do similar setup if cli detects gatsbyjs project.

[sedubois]

@tricoder42 When starting from scratch I get this so far, not working yet (gatsby 1.9.277, lingui 2.4.2):

1. Run:

gatsby new gatsby-lingui-demo && cd gatsby-lingui-demo
yarn add @lingui/core @lingui/react
yarn add -D @lingui/cli @lingui/babel-preset-react

1. Add lingui and Babel configuration to package.json:

  "babel": {
    "presets": [
      "env",
      "react",
      "@lingui/babel-preset-react"
    ]
  },
  "lingui": {
    "fallbackLocale": "en",
    "sourceLocale": "en",
    "localeDir": "src/locales",
    "srcPathDirs": [ "src" ],
    "format": "minimal"
  }

1. Add to React code:

// src/layouts/index.js
import { I18nProvider } from '@lingui/react'

const Layout = ({ children, data }) => (
  <I18nProvider language="en">
    ...
  </I18nProvider>
)

// src/pages/index.js
import { Trans, withI18n } from "@lingui/react";
const IndexPage = () => (
  <div>
    <h1><Trans>Hi people</Trans></h1>
    ...
  </div>
)
export default withI18n()(IndexPage)

1. Run

npx lingui add-locale en fr
npx lingui extract
echo '{ "Hi people": "Bonjour le monde" }' > src/locales/fr/messages.json

1. At this point however I'm blocked when trying to run gatsby develop, the browser throws the error Render.render(): A valid React element (or null) must be returned. Ideas?

Current repo is bere. If/once the rest is figured out, I would suggest (in no particular order):

• make lingui require less Babel and Lingui config by improving defaults, even allowing zero config (follow the recent JS trend)
• makelingui init do more stuff (adding all deps + autogenerating any unavoidable config) then document the rest of the manual steps in your website
• host the gatsby-starter-jslingui in your organization, test that it works with gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GITHUB_REPO] and add it to the starter repos

[mschipperheyn]

I have the same error, but I use no gatsby not do I have global babel-core.

Error: Cannot find module 'babel-core'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/marc/.config/yarn/global/node_modules/@lingui/cli/api/extractors/babel.js:15:18)

"devDependencies": {
        "@babel/cli": "7.0.0",
        "@babel/core": "7.0.1",
        "@babel/node": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-proposal-decorators": "^7.0.0",
        "@babel/plugin-proposal-do-expressions": "^7.0.0",
        "@babel/plugin-proposal-export-default-from": "7.0.0",
        "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
        "@babel/plugin-proposal-function-bind": "^7.0.0",
        "@babel/plugin-proposal-function-sent": "^7.0.0",
        "@babel/plugin-proposal-json-strings": "^7.0.0",
        "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
        "@babel/plugin-proposal-numeric-separator": "^7.0.0",
        "@babel/plugin-proposal-optional-chaining": "^7.0.0",
        "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
        "@babel/plugin-proposal-throw-expressions": "^7.0.0",
        "@babel/plugin-syntax-decorators": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/plugin-syntax-import-meta": "^7.0.0",
        "@babel/plugin-transform-react-constant-elements": "^7.0.0",
        "@babel/plugin-transform-react-inline-elements": "^7.0.0",
        "@babel/plugin-transform-react-jsx-self": "^7.0.0",
        "@babel/plugin-transform-react-jsx-source": "^7.0.0",
        "@babel/polyfill": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-flow": "7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.0.0",
        "@babel/template": "^7.0.0",
        "@lingui/babel-preset-react": "2.6.1",
        "assets-webpack-plugin": "3.5.1",
        "babel-core": "^7.0.0-bridge.0",
        "babel-eslint": "9.0.0",
        "babel-jest": "23.4.2",
        "babel-loader": "8.0.2",
        "babel-plugin-module-resolver": "3.1.1",
        "babel-plugin-transform-react-pure-class-to-function": "1.0.1",
        "babel-plugin-transform-react-remove-prop-types": "0.4.15",
"chokidar": "2.0.3",
        "css-loader": "1.0.0",
        "detect-port-alt": "1.1.6",
        "enzyme": "3.3.0",
        "enzyme-adapter-react-16": "1.1.1",
        "enzyme-to-json": "3.3.3",
        "error-overlay-webpack-plugin": "^0.1.2",
        "eslint": "4.19.1",
        "eslint-config-airbnb": "16.1.0",
        "eslint-config-prettier": "2.9.0",
        "eslint-plugin-flowtype": "^2.33.0",
        "eslint-plugin-import": "2.11.0",
        "eslint-plugin-jest": "21.15.1",
        "eslint-plugin-jsx-a11y": "6.0.3",
        "eslint-plugin-prettier": "2.6.0",
        "eslint-plugin-react": "7.7.0",
        "extract-text-webpack-plugin": "4.0.0-beta.0",
        "file-loader": "1.1.11",
        "glob": "^7.1.2",
        "happypack": "5.0.0",
        "html-webpack-plugin": "3.2.0",
        "husky": "0.14.3",
        "identity-obj-proxy": "3.0.0",
        "istanbul-api": "1.3.1",
        "istanbul-reports": "1.3.0",
        "jest": "23.5.0",
        "jest-cli": "23.5.0",
        "lint-staged": "7.1.0",
        "md5": "2.2.1",
        "modernizr-loader": "1.0.1",
        "node-notifier": "5.2.1",
        "postcss-loader": "3.0.0",
        "postcss-preset-env": "5.3.0",
        "prettier": "1.14.2",
        "prettier-eslint": "8.8.2",
        "prettier-eslint-cli": "4.7.1",
        "react-addons-test-utils": "15.6.2",
        "react-codemod": "4.0.0",
        "react-dev-utils": "5.0.1",
        "react-test-renderer": "16.4.0",
        "regenerator-runtime": "0.11.1",
        "rimraf": "^2.6.2",
        "sass-loader": "^6.0.5",
        "semver": "5.5.0",
        "source-map-support": "0.5.5",
        "style-loader": "0.23.0",
        "supertest": "3.1.0",
        "webpack": "4.8.2",
        "webpack-bundle-analyzer": "2.11.2",
        "webpack-dev-middleware": "3.1.3",
        "webpack-flush-chunks": "1.2.3",
        "webpack-hot-middleware": "2.22.1",
        "webpack-merge": "4.1.2",
        "webpack-node-externals": "1.7.2"
    }

I saw the following global babel packages installed through other global clis:

• @babel/code-frame
• @babel/higlight
• babel-runtime
• babel-messages
• babel-polyfill
• babel-runtime
• babel-types

The question is also: why is the cli global? This init function seems superfluous, and all the other functions are local.

[mschipperheyn]

Ok, uninstalling global @lingui/cli en installing locally brought me a step further. It created other problems, but not related to this issue.

[dmitrizzle]

Same issue here. Had to re-install /cli globally, then remove it, then add to devDependencies and run with yarn.

After performing the above and adding a locale ($yarn lingui add-locale en), $ yarn lingui extract throws as per https://github.com/lingui/js-lingui/issues/328

[tricoder42]

@mschipperheyn I find it convenient to use it without yarn prefix, but I guess we should document installing CLI locally and use it through yarn or npm run as a preferred method. Anyone who wants to install cli globally is allowed to do so on their own.

[FredyC]

Personally, I've basically given up on global modules (even CLI) because it means to keep track what's installed there and document it for other team members (especially version-wise). While keeping it in package.json is rather self documenting.

[tricoder42]

Make sense. If anyone wanted to make a PR to documentation and change global installation instructions to local ones, you're more than welcome! 👍

[dhrubesh]

Hey, I'm still getting this error, any workaround?

[tricoder42]

@dhrubesh What babel version do you use? 6 or 7? Try to follow CLI installation guide please to see if that fixes your issue: https://lingui.js.org/ref/cli.html#install

[dmitrizzle]

@dhrubesh aside from all the advice above, what helped me is removing /node_modules folder, getting rid of yarn.lock file and running $ yarn again.

[tricoder42]

@dmitrizzle Hmm, that's interesting. Do you have both versions of yarn.lock, before and after? It might give us additional info if we inspect the diff.

[dmitrizzle]

@tricoder42 ugh sorry, that was last week, it's long gone. I have tried setting it up globally first, which gave errors, then I followed the advice here, and after I've cleared my dir and .lock file - if that's any help.

[tricoder42]

Not really, but still thank you for the info and sorry for the hassle. I'm hoping this annoying situation with babel-core will be resolved in v3 (#334).

[BentoumiTech]

I've also had the same issue with next.js 7.0.2

The issue on my side was fixed by install babel bridge this way

yarn add @lingui/[email protected] [email protected] @babel/core

[PinkyRabbit]

I've also had the same issue with next.js 7.0.2

The issue on my side was fixed by install babel bridge this way

yarn add @lingui/[email protected] [email protected] @babel/core

Can you share versions of packages? Because after two hours I still can't call babel-core...

  "dependencies": {
    "@lingui/react": "^2.7.2",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "bulma": "^0.7.2",
    "next": "^7.0.2",
    "node-sass": "^4.11.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@lingui/cli": "2.7.2",
    "@lingui/macro": "^2.7.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-plugin-macros": "^2.4.2"
  }

Error:

usesa@pinkyspot:/var/www/learn-react/one-more-app$ lingui extract
internal/modules/cjs/loader.js:550
    throw err;
    ^

Error: Cannot find module 'babel-core'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:548:15)
    at Function.Module._load (internal/modules/cjs/loader.js:475:25)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at Object.<anonymous> (/home/usesa/.nvm/versions/node/v9.11.1/lib/node_modules/@lingui/cli/api/compat.js:12:18)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)

[polo13999]

same here

[mschipperheyn]

Ah yes, another thing that may or may not help people. I'm working on a babel 7 mono repo and I @lingui caused me problems with conflicts between core-js versions. Downgrading @lingui/cli to version 2.6.1 (only that package) solved my problem, because the component that as causing my core-js headaches (opencollective) was removed in that version (and later came back)

[cllpse]

I had to add "babel-core": "^7.0.0-bridge.0" as a devDependency to get Lingui to play nice.

[marcelalburg]

Any news here to support "@babel/core" ?

[sorokinvj]

Having the same error

Error: Cannot find module 'babel-core'

while executing lingui extract
I have installed @babel/core - 7.6.0
Don't want to install babel-core, but what are my other options?
"@lingui/cli": "^2.9.1",
"@lingui/loader": "^2.9.1",

[tricoder42]

Unfortunately, Lingui 2.x requires at least babel-core^7.0.0-bridge.0 if you want to use Babel 7 (@babel/core). Lingui 3.x (so far in pre-release) works with Babel 7 without bridge package.

[MartijnHols]

It would appear the docs are in an in-between state with https://lingui.js.org/ref/cli.html no longer listing the babel-core dependency, while the commands listed there still installing v2.