js-lingui: Wrong variable in literal strings

Describe the bug Lingui confuses variables (?)

To Reproduce Try this code:

import React from 'react'
import { t } from '@lingui/macro'

export default class MyComponent extends React.Component {
  render () {
    const totalPrice = 10
    let message
    if (totalPrice > 0) {
      const limit = 50
      message = i18n._(t`This is the great limit ${limit}`)
    } else if (totalPrice <= 0) {
      const limit = 10
      message = i18n._(
        t`This is the small limit ${limit}`
      )
    }
    return message
  }
}

Now use babel to transpile it, you will get this:

...snip...

      if (totalPrice > 0) {
        var limit = 50;
        message = i18n._( /*i18n*/{
          id: 'This is the great limit {limit}',
          values: {
            limit: limit
          }
        });
      } else if (totalPrice <= 0) {
        var _limit = 10;
        message = i18n._( /*i18n*/{
          id: 'This is the small limit {limit}',
          values: {
            limit: limit
          }
        });
      }
      return message;

...snip...

As you can see the second “limit” variable is still limit

Expected behavior The second snip code should use _limit variable as follow:

        var _limit = 10;
        message = i18n._( /*i18n*/{
          id: 'This is the small limit {limit}',
          values: {
            limit: _limit
          }

Additional context

  • jsLingui version 2.7.4
  • Babel version
project@2.0.1 /myhome/project-test
├─┬ babel-cli@6.26.0
│ ├── babel-core@6.26.3  deduped
│ └─┬ babel-register@6.26.0
│   └── babel-core@6.26.3  deduped
└── babel-core@6.26.3 
  • .babelrc:
{
  "presets": ["es2015", "stage-0", "react"],
  "plugins":[
    "macros",
  ]
}

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 15 (8 by maintainers)

Most upvoted comments

https://codesandbox.io/s/epic-butterfly-ou8ww?file=/src/index.js @MartijnHols here you have, updated the codesandbox to v3.x.x and looks fixed 👍🏻

I just ran into this bug. It also occurs when defining a var inside a switch case along the lines of;

switch (err) {
  case errors.invalidEmail:
    const email = form.values.email
    return <Trans><strong>{email}</strong> is invalid</Trans>
  // ...
}