js-lingui: @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"
}
}
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 19 (18 by maintainers)
Ah, I see, because
pluralactually 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.
Hmm, since GatsbyJS uses webpack, you might want to use @lingui/loader and change the imports:
Me as well 🤔
Soon or later we should create an official starter or plugin, or at least document it with Gatsby v1 and v2. There’s lot of info hanging in GitHub issues…