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

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
lingui-babel-debug@0.0.1 /Users/sdubois/Repos/lingui-babel-debug
├── @babel/core@7.0.0-rc.1
├─┬ babel-core@6.26.3
│ └─┬ babel-register@6.26.0
│   └── babel-core@6.26.3  deduped
├─┬ babel-webpack-plugin@0.1.1
│ └── babel-core@6.26.3  deduped
└─┬ gatsby@1.9.277
  ├── babel-core@6.26.3  deduped
  └─┬ postcss-import@8.2.0
    └─┬ pkg-resolve@0.1.14
      └─┬ jspm@0.17.0-beta.48
        └─┬ systemjs-builder@0.16.13
          └── babel-core@6.26.3  deduped
$ npm list -g babel-core @babel/core
/usr/local/lib
├── @babel/core@7.0.0-rc.1
└── babel-core@7.0.0-bridge.0

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 27 (13 by maintainers)

Most upvoted comments

Any news here to support “@babel/core” ?

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/cli@2.7.2 babel-core@7.0.0-bridge.0 @babel/core

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 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

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

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).

@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.

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.