classnames
classnames copied to clipboard
Class names being returned as `[object Object]` as of v2.3.0
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());
}
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
@BrianAtIgloo could you verify if !arg.hasOwnProperty('toString') resolves your issue?
Thank you for the quick reply + troubleshoot! I confirmed using hasOwnProperty works, I can open a PR later today 👍
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
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
toStringequality 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
Fixed in https://github.com/JedWatson/classnames/pull/281