-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
Description
Bug report
What is the current behavior?
Webpack v5 incorrectly evaluates & bundles "property" in object
as true
, when object
imported from a different file, even if the property is not present in the object (e.g. "doesNotExist" in { }
).
If the current behavior is a bug, please provide the steps to reproduce.
create the following files (e.g. in an empty src folder):
// testObject.js
export const testObject = {}
// main.js
import { testObject } from './testObject'
console.log('property' in testObject ? 'buggy' : 'not buggy')
With or without a webpack configuration, run webpack (e.g. npx webpack-cli
).
Inspect the emitted bundle. (below: without a configuration file)
// main.js (NODE_ENV=production)
!function(){"use strict";console.log("buggy")}();
// main.js (NODE_ENV=development)
... console.log(true ? 'buggy' : 'not buggy') ...
What is the expected behavior?
The expression 'property' in testObject
should evaluate to false
, or be evaluated at runtime.
For comparison, with webpack v4 or when using terser directly, I get
console.log("property"in{}?"buggy":"not buggy")}
Workarounds:
The issue does not appear / can be worked around if testObject
is defined within the same file or if it's indirectly referenced. The following three examples work correctly:
import { testObject } from './testObject'
console.log('property' in (0, testObject) ? 'buggy' : 'not buggy') // => not buggy
const indirectReference = testObject
console.log('property' in indirectReference ? 'buggy' : 'not buggy') // => not buggy
const testObject2 = {}
console.log('property' in testObject2 ? 'buggy' : 'not buggy') // => not buggy
Other relevant information:
webpack version: 5.71.0
Node.js version: v16.14.0
Operating System: Windows 10
This appears to be the root of chakra-ui/chakra-ui#5804 and chakra-ui/chakra-ui#5812, where currently downgrading to webpack v4 (by downgrading react-scripts) is suggested as a workaround.