question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

in-operator broken; `"property" in object` ALWAYS gets inlined as true

See original GitHub issue

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 https://github.com/chakra-ui/chakra-ui/issues/5804 and https://github.com/chakra-ui/chakra-ui/issues/5812, where currently downgrading to webpack v4 (by downgrading react-scripts) is suggested as a workaround.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:10
  • Comments:14 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
Quovadisqccommented, Apr 6, 2022

Might help someone that also have the same issue as I had but this also breaks Socket-io by making connections throw timeouts because of this this function

2reactions
vankopcommented, Apr 6, 2022

yeah, please use webpack@5.70 for now…

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to check if object property exists with a variable holding ...
use the in operator if you are certain you have an object and only want to check for the existence of the property...
Read more >
Working with objects - JavaScript - MDN Web Docs - Mozilla
An object is a collection of properties, and a property is an association between a name (or key) and a value. A property's...
Read more >
4 Ways to Check if the Property Exists in JavaScript Object
This is the least known method to check the property in the object. In Javascript, every value has an associated boolean, true or...
Read more >
7 Tips to Handle undefined in JavaScript - Dmitri Pavlutin
The short answer is that JavaScript interpreter returns undefined when accessing a variable or object property that is not yet initialized.
Read more >
JavaScript Tutorial: The Basics
Array's Properties (Variables) and Operations (Functions). The Array object has these commonly-used properties: .length: the number of items ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found