"Duplicate declaration" error when running "lingui extract" with NODE_ENV=production

Describe the bug I’ve recently upgraded my LinguiJS package versions from 2.7.0 to 2.7.2. Since the upgrade, my build step to extract language strings crashes with an error message about a duplicate declaration of Trans. After some experimentation, I discovered that this only happens when the NODE_ENV environment variable is production. If I set NODE_ENV to development or test, it works fine.

(I haven’t had time yet to try to replicate this error on a newly set-up project, so it’s possible it may be related to other quirks in my project.)

To Reproduce

1. Have a “Create React App” application with a file that imports {Trans} like so:

import { Trans } from "@lingui/macro"

export default function App() {
   return <Trans>This should be translated!</Trans>
}

1. Set up a script in package.json like so:

"scripts": {
  "extract": "NODE_ENV=production lingui extract --overwrite"
}

1. Run npm run extract
2. The npm run script crashes, with the error message TypeError: /path/to/project/src/file.js: Duplicate declaration "Trans"

Expected behavior lingui extract should complete successfully, with output like this:

Catalog statistics:
┌─────────────┬─────────────┬─────────┐
│ Language    │ Total count │ Missing │
├─────────────┼─────────────┼─────────┤
│ en (source) │     293     │    -    │
│ en-x-intl   │     293     │   293   │
└─────────────┴─────────────┴─────────┘

(use "npm run add-locale <locale>" to add more locales)
(use "npm run extract" to update catalogs with new messages)
(use "npm run compile" to compile catalogs for production)

Additional context As mentioned above, this error only happens when running lingui with NODE_ENV=production. When I run it with NODE_ENV=development, it finishes successfully. That will probably be my workaround for the time being, because I imagine the NODE_ENV probably shouldn’t have any effect on the CLI scripts anyhow.

Here’s the full error stack from npm (with some file names changed):

/path/to/project/node_modules/@lingui/cli/api/compat.js:48
        throw e;
        ^

TypeError: /path/to/project/src/file.js: Duplicate declaration "Trans"
> 1 | import { Trans } from '@lingui/macro';
     |          ^
    at File.buildCodeFrameError (/path/to/project/node_modules/@babel/core/lib/transformation/file/file.js:261:12)
    at Scope.checkBlockScopedCollisions (/path/to/project/node_modules/@babel/traverse/lib/scope/index.js:347:22)
    at Scope.registerBinding (/path/to/project/node_modules/@babel/traverse/lib/scope/index.js:504:16)
    at Scope.registerDeclaration (/path/to/project/node_modules/@babel/traverse/lib/scope/index.js:452:14)
    at Object.Declaration (/path/to/project/node_modules/@babel/traverse/lib/scope/index.js:125:12)
    at NodePath._call (/path/to/project/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/path/to/project/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/path/to/project/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/path/to/project/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitMultiple (/path/to/project/node_modules/@babel/traverse/lib/context.js:85:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@0.1.0 extract: `NODE_ENV=production lingui extract --overwrite`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the project@0.1.0 extract script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

• jsLingui version: 2.7.2
• Your Babel config: Create React App
• Babel version:

└─┬ react-scripts@2.1.3
  ├── babel-core@7.0.0-bridge.0 
  └─┬ jest@23.6.0
    └─┬ jest-cli@23.6.0
      ├─┬ jest-config@23.6.0
      │ └─┬ babel-core@6.26.3 
      │   └─┬ babel-register@6.26.0
      │     └── babel-core@6.26.3 
      └─┬ jest-runtime@23.6.0
        └── babel-core@6.26.3 

[adamgruber]

I updated to @lingui/cli 3.7.1 and babel-plugin-macros 3.0.1 but I’m still seeing this issue.

[iStefo]

I was intrigued by @motionVector’s comment since I also noticed a change in the number of errors reported after updating the caniuse-lite db.

I was able to narrow it down to whether the Android 4.4.3 browser should be supported by babel or not. So in our case, lingui-extract works for the following browser list, because of the last rule:

  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all",
    "not android 4.4.3"
  ]

(Of course, setting the 0.2% cutoff to a higher value would also work because it then excludes the old stock android browsers, too)

It looks like babel applies some transforms to the source code (~I couldn’t determine what features we used in the affected files and nowhere else, though~) when android 4.4.3 should be supported.

Without NODE_ENV=development, though, a lot of those declaration errors are still throws, suggesting that babel still does some incompatible transforms in that environment.

Update: I was able to figure out what “feature” triggered babel to interfere with the lingui macro: It was affecting files where we would do a destructuring assignment at the module level:

const { Foo } = { Foo: 42 }