question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trans values and Plurals broken in production build

See original GitHub issue

Describe the bug When serving a production build, usages of Trans macro with values, as well as Plurals, 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 in node_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:closed
  • Created 5 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
mbrevdacommented, Jan 24, 2019

There should be en: catalogEn to load catalog for en locale

Even if en is the default locale?

1reaction
natmegscommented, Nov 7, 2018

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.

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found