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)
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;
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