storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.21k stars 9.26k forks source link

[Bug]: Objects get polluted with _constructor-name_ key #21616

Closed Haroenv closed 1 year ago

Haroenv commented 1 year ago

Describe the bug

Unfortunately I can't figure out what's causing this, but some of my network requests get called with _constructor-name_: SearchParameters, which I know is the name of a class. Normally those calls should have been using JSON.stringify, and not have the contstructor name injected. I believe this could be related with https://github.com/storybookjs/telejson?

I can't reproduce this consistently, usually on a reload it doesn't occur anymore.

To Reproduce

https://github.com/algolia/instantsearch/tree/master/packages/instantsearch.js is one repo I can reproduce this in by interacting in the iframe

System

"@storybook/addon-a11y": "5.3.9",
    "@storybook/addon-actions": "5.3.9",
    "@storybook/addon-knobs": "5.3.9",
    "@storybook/addon-links": "5.3.9",
    "@storybook/addon-options": "5.3.9",
    "@storybook/addons": "5.3.9",
    "@storybook/theming": "5.3.9",

and also in individual packages

    "@storybook/html": "5.3.9",
    "@storybook/vue": "5.3.9",
    "@storybook/react": "5.3.9",

Additional context

I believe telejson might add info to objects that get logged(?) or otherwise processed by storybook, which changes its behaviour when serialising. This definitely must be conditional, maybe on hot reload, as I can't reproduce it consistently.

shilman commented 1 year ago

@Haroenv Thanks for reporting. Unfortunately Storybook 5.3 is three years old and we are no longer updating it. I'd recommend updating to 7.0 to get Storybook's latest and greatest. If the problem is still happening we'd be happy to help debug.

Migration guide: https://storybook.js.org/migration-guides/7.0

Haroenv commented 1 year ago

Can't reproduce this anymore / consistently indeed :)

kcmr commented 1 year ago

This continues happening with version 7.1.0 when you have objects generated from a JSON using plainToInstance() method from class-transformer.

<i> [webpack-dev-middleware] wait until bundle finished: /main.iframe.bundle.js
node_modules/@storybook/core-server/node_modules/telejson/dist/index.js:1446
        const Fn = new Function(`return function ${name2.replace(/[^a-zA-Z0-9$_]+/g, "")}(){}`)();
                                                         ^

TypeError: name2.replace is not a function
    at Object.revive (node_modules/@storybook/core-server/node_modules/telejson/dist/index.js:1446:58)
rm-dave commented 1 year ago

I also seem to be getting this error TypeError: name2.replace is not a function after upgrading from 7.0.27 to 7.1.1

DB-CL commented 1 year ago

Yep, me too, having the same bug with 7.1.1 in a big story. Didn't manage to narrow it down yet but I can provide information if needed

robkroll commented 10 months ago

Can this issue be re-opened? I'm also getting this error after upgrading from 7.0.8 to 7.1.1. Storybook builds just fine, but then if I change the code and it gets reloaded, I get this error. Also can provide more information if needed.

valentinpalkovic commented 10 months ago

@robkroll Can you verify whether the issue also happens with the latest Storybook? (7.5.3)

ak99372 commented 10 months ago

Still happening with lastest 7.5.3. Our project UI objects are riddled with "constructor-name" values interfering with the code.

image

FYI: This occurs right after userEvent.click() so possibly related to "@storybook/testing-library"

justinfagnani commented 1 month ago

I'm seeing this with a component I'm building that displays results from getOwnPropertyKeys(). One the first render the keys look correct, but on a component update I start seeing _constructor-name_ as one of the keys on Maps and Sets.

I can't see what's adding these properties, but for working on an object inspector component, it's pretty bad to have Storybook mess with the shape of the object in the stories.

Can we re-open this bug?

justinfagnani commented 1 month ago

Looks like the problem is here: https://github.com/storybookjs/telejson/blob/d4d6cd0574a7d866e082e4f964c9e34c0d8ee037/src/index.ts#L298

There's no issue on telejson yet