Trans values and Plurals broken in production build
See original GitHub issueDescribe the bug
When serving a production build, usages of Trans
macro with values, as well as Plural
s, are rendered as they appear in messages catalog instead of with appropriate replacements. It appears to be a problem with the production bundling of the @lingui/core
package.
To Reproduce
Minimal set up with code sample below. Run npm i
before starting.
To see it working in development:
- run
npm start
- You should see
Some string with variable
Only one
To see if broken with production build:
- run
npm run build
- run
serve -s build
- You should see
Some string with {variable}
{0, plural, one {Only one} other {More than one}}
To fix with production build:
- Find
@lingui/core/index.js
innode_modules
- Change file to serve development bundle always
if (process.env.NODE_ENV === "production") {
module.exports = require("./cjs/core.development.js")
} else {
module.exports = require("./cjs/core.development.js")
}
- run
npm run build
- run
serve -s build
- You should see
Some string with variable
Only one
Minimal set up:
import React, { Component } from 'react';
import { Trans, Plural } from "@lingui/macro";
import { I18nProvider } from "@lingui/react";
import logo from './logo.svg';
import './App.css';
import catalogEn from "./locales/en/messages.js";
class App extends Component {
render() {
const variable = "variable";
return (
<div className="App">
<I18nProvider language="en" catalogs={{ cs: catalogEn }}>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Trans>
Some string with {variable}
</Trans>
<p>
<Plural
value={1}
one={`Only one`}
other={`More than one`}
/>
</p>
</header>
</I18nProvider>
</div>
);
}
}
export default App;
Find minimal reproduction repo here
Expected behavior
Expect Trans
values to be replaced and Plural
to be formatted correctly.
Additional context Minimal reproduction created using CRA. Problem originally noticed on non-minimal repo that doesn’t use CRA.
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
@lingui/macro - Reference — LinguiJS documentation
plural macro is used for pluralization, e.g: messages which has different form based on counter. The first argument value determines the plural form....
Read more >Broken plural - Wikipedia
Broken plurals are formed by changing the pattern of consonants and vowels inside the singular form. They contrast with sound plurals (or external...
Read more >A Guide to React Localization with i18next | Phrase
React-i18next is a powerful set of components, hooks, and plugins that sit on top of i18next. Learn how to use it to internationalize...
Read more >Comprehension, Production and Processing of Maltese ...
Below, we shall see that the broken plurals and the sound plurals of Maltese may also pattern differently in semantic space. Several studies ......
Read more >The complete guide to internationalization in Next.js
First, we need to create Next.js application with TypeScript. ... When the developerCount value is 1 , the Plural component will render “We ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Even if en is the default locale?
Hi @tricoder42, seems similar but all messages are extracted to the message catalog. When I change the
@lingui/core/index.js
file in node_modules to use the development bundle instead of production bundle it works as expected.