Js-lingui: Wrong variable in literal strings

[LeoIannacone]

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

[email protected] /myhome/project-test
├─┬ [email protected]
│ ├── [email protected]  deduped
│ └─┬ [email protected]
│   └── [email protected]  deduped
└── [email protected] 

• .babelrc:

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins":[
    "macros",
  ]
}

[tricoder42]

Hey @LeoIannacone, this is definitely a bug! Do you have a chance to test it with Babel 7?

[LeoIannacone]

I spent some time trying to reproduce it with react-create-app, but the ejection failed for different reasons and I gave up.

[hjylewis]

I was able to write a test to reproduces this bug.

I'm not sure what the cause is yet since I'm not super familiar with babel. It is definitely the result of the lingui macro and babel-plugin-transform-block-scoping which is included in the es2015 preset.

I'm not sure how the ordering of babel works. Thoughts?

[tricoder42]

As far as I know:

Plugins run before Presets.
Plugin ordering is first to last.
Preset ordering is reversed (last to first).

Could you please create a small repository with minimal example?

[hjylewis]

Here's a test that reproduces the bug https://github.com/lingui/js-lingui/pull/515

https://github.com/hjylewis/js-lingui/tree/issue-486/packages/macro/test/fixtures/t-var

[MartijnHols]

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>
  // ...
}

[tricoder42]

I tried it with latest code in next branch and with Babel 7, it works as expected (see https://github.com/lingui/js-lingui/pull/538/files#diff-e33ad105288519d96beb567e14abc881).

Do you both use Babel 6 and es2015 preset? @babel/preset-es2015 didn't work (Babel couldn't find it even though it was installed) but when I replaced it with @babel/preset-env, it worked.

If it's related to Babel 6 I'm afraid there's nothing I can do, because I'm dropping Babel 6 support in LinguiJS 3 (see #537). If it happens even with Babel 7 please let me know and I'll take a look.

[MartijnHols]

This is with babel 7, but not from the next branch.

[tricoder42]

@MartijnHols Alright, thanks for the info! I'll keep an eye on it, but hopefully it's already solved in next.

[MartijnHols]

I copied the codesandbox I found in another issue to reproduce the issue;

2.8.3: https://codesandbox.io/s/amazing-maxwell-13ymf?fontsize=14

I couldn't find either next or 3.0 in the readme, so not sure about the installation instructions to update it to use that.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MartijnHols]

Still something I have to work around.

[tricoder42]

Hey @MartijnHols, please update the sandbox to the latest version so it's easier to spot the bug. Also, if you manage to fix it, please send a PR

[semoal]

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 👍🏻

[MartijnHols]

Awesome! Thanks both!