classnames icon indicating copy to clipboard operation
classnames copied to clipboard

Class names being returned as `[object Object]` as of v2.3.0

Open BrianAtIgloo opened this issue 4 years ago • 4 comments

Hi, first off - thank you for maintaining this fantastic package!

That said, we've run into an issue with v2.3.0 where our bundled components are now outputting [object Object] class names because of this recent change to support a custom toString fn.

The problem only occurs after we run our code through our build pipeline which uses Rollup/Babel to produce a CJS bundle so we can render server-side.

Component Code:

  const inputStyleClass = classNames(styles['text_input__input'], {
    [styles['text_input__input--with-icon']]: !!icon,
  });

Transpiled code:

  var inputStyleClass = classnames(
    styles$z['text_input__input'],
    (_classNames2 = {},
        _defineProperty$2(_classNames2, styles$z['text_input__input--with-icon'], !!icon),
        _classNames2,
    )
  );

We've locked our components to 2.2.6 to resolve the issue and suggest the following change:

    if ((/\{\s*\[native code\]\s*\}/).test(arg.toString)) {
      for (var key in arg) {
        if (hasOwn.call(arg, key) && arg[key]) {
          classes.push(key);
        }
      }
    } else {
      classes.push(arg.toString());
    }

BrianAtIgloo avatar Apr 14 '21 01:04 BrianAtIgloo

The problem only occurs after we run our code through our build pipeline which uses Rollup/Babel to produce a CJS bundle so we can render server-side.

Do you mean that the pipeline is mangling the resultant object's toString? Pull requests are accepted if you'd like to submit your suggestion, but we'll need to evaluate how this is happening and how to test against it

dcousens avatar Apr 14 '21 02:04 dcousens

@BrianAtIgloo could you verify if !arg.hasOwnProperty('toString') resolves your issue?

dcousens avatar Apr 14 '21 02:04 dcousens

Thank you for the quick reply + troubleshoot! I confirmed using hasOwnProperty works, I can open a PR later today 👍

BrianAtIgloo avatar Apr 14 '21 14:04 BrianAtIgloo

We're experiencing this issue because we're executing our render code in a Node VM, which means we actually have multiple Object globals in memory and the toString equality check fails. I managed to create a minimal reproduction: https://runkit.com/embed/3svylngmhh23

markdalgleish avatar Jun 09 '21 23:06 markdalgleish

We're experiencing this issue because we're executing our render code in a Node VM, which means we actually have multiple Object globals in memory and the toString equality check fails. I managed to create a minimal reproduction: https://runkit.com/embed/3svylngmhh23

@markdalgleish hello, i'm getting same error when excute code with classnames in vm2 like node vm. How did you handle this issue

FanShiDe avatar Aug 08 '22 09:08 FanShiDe

Fixed in https://github.com/JedWatson/classnames/pull/281

dcousens avatar Sep 13 '22 01:09 dcousens