@lingui/loader inside GatsbyJS project throws an error

Describe the bug I have a project where I can successfully use <Trans id="hello" />, but i18n.t`hello` doesn’t work in development (just prints the key), and when building the static site it gives the error WebpackError: i18n.t is not a function.

To Reproduce

import { I18n, Trans } from "@lingui/react"

export default function App() {
  return (
    <I18n>
      {({ i18n }) => (
        <React.Fragment>
          <div>
            {i18n.t`hello`} // --> doesn't work, renders hello
          </div>
          <div>
            <Trans id="hello" /> // --> works, renders bonjour
          </div>
        </React.Fragment>
      )}
    </I18n>
  )
}

Expected behavior Should render bonjour, bonjour instead of hello, bonjour in dev, and should not raise build errors.

Additional context Add any other context about the problem here.

• jsLingui version 2.6.1
• Babel version babel-core@6.26.3
• Using Gatsby v1 and with this (partial) package.json config:

{
  "dependencies": {
    "@lingui/react": "2.6.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
  },
  "devDependencies": {
    "@lingui/babel-preset-react": "2.6.1",
    "@lingui/cli": "2.6.1",
    "babel-plugin-dynamic-import-webpack": "1.0.2",
    "babel-plugin-import": "1.8.0",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-webpack-plugin": "0.1.1",
  },
  "scripts": {
    "lingui:extract": "BABEL_ENV=lingui-extract lingui extract",
  },
  "babel": {
    "presets": [
      "env",
      "react",
      "@lingui/babel-preset-react"
    ],
    "env": {
      "lingui-extract": {
        "plugins": [
          "transform-class-properties",
          "transform-object-rest-spread",
          "syntax-dynamic-import",
          "dynamic-import-webpack"
        ]
      }
    }
  },
  "lingui": {
    "fallbackLocale": "en",
    "sourceLocale": "en",
    "localeDir": "src/locale",
    "srcPathDirs": [
      "src/components",
      "src/layouts",
      "src/pages"
    ],
    "format": "minimal"
  }
}

[tricoder42]

Ah, I see, because plural actually performs formatting and you need a compiled catalog for this.

Alright, here’s the plan: I’ll review the workflow over the weekend. In some cases compiled message catalogs aren’t required and it might be enough to compile them at runtime. I’ll create a documentation for GatsbyJS, example in Gatsby repo and review few starters I saw around.

I’ll get back to you on Monday.

In the meantime, I added PR to your repo.

[tricoder42]

Hmm, since GatsbyJS uses webpack, you might want to use @lingui/loader and change the imports:

- en: require("./locale/en/messages.js"),
+ en: require("@lingui/loader!./locale/en/messages.json"),