[Bug] name2.replace is not a function

[BenjaminVanRyseghem]

Describe the bug

When navigating through stories, this error pops up.

The problem seems to come from

const Fn = new Function(`return function ${name2.replace(/[^a-zA-Z0-9$_]+/g, "")}(){}`)();

where name2 is actually { name : "string" }

Steps to reproduce the behavior

The following script seems to be enough for Storybook to throw errors.

class AbstractInput {}

const spec = [new AbstractInput("phone")];

export default {
	title: "Example/Form",
	args: {
		spec
	}
};

export const Default = {
	render: () => document.createTextNode("Bar")
};

export const WithCustomInput = {
	render: () => document.createTextNode("Foo")
};

The project where it fails can be found here

Expected behavior

The parsing should work

[BenjaminVanRyseghem]

I had really hard time chasing it down, and narrowing the code. I'm sorry to not be able to provide more precise information 😕

[Vontus]

Same happening here, it happens when an instance of a class is passed to the args object.

To reproduce it, I had to edit the component code while displaying that same component from Storybook in the browser.

[ekeijl]

This breaks Storybook on every hot-reload and makes development unworkable after updating to Storybook v7.1.0.

[stevus]

@BenjaminVanRyseghem just building on what you found

Here is the source file / LN where the issue occurs:

telejson/src/index.ts

Line 347 in be8180e

const Fn = new Function(`return function ${name.replace(/[^a-zA-Z0-9$_]+/g, '')}(){}`)();

[BenjaminVanRyseghem]

as a workaround, I locally replaced this line with

	let name = name2.replace ? name2.replace(/[^a-zA-Z0-9$_]+/g, "") : "DefaultConstructorName"
    const Fn = new Function(`return function ${name}(){}`)();

and so far it seems to work 😄

[stevus]

yea I was going to look at how to patch it locally at least to prevent Storybook from crashing - I will use your suggestion as an interim solution.

@ndelangen any idea on what it would take to get a fix in to patch Storybook? can we submit a PR or is this something you have an easy solution for?

[ndelangen]

I'll try and fix this today!

[ndelangen]

I found a fix in storybook, I'll open a PR, and try to get this merged/patch asap.

[TheSlimvReal]

I still get the name2.replace is not a function... error with everything on the latest version.

[ndelangen]

@TheSlimvReal I fixed the problem in storybook, can you make sure you're using 7.2.0:
storybookjs/storybook#23613

If you could supply a reproduction repo, that would allow to me investigate.

[ekeijl]

I still get the name2.replace is not a function... error with everything on the latest version.

The issue was fixed for me in v7.2.0, maybe try pinning to that specific version and make sure all Storybook dependencies in your package.json are set to that version (and that you ran npm install).

If it still breaks in the newest version, there might have been a regression.

[stevus]

I'm on 7.2.1 and I still see the issue:

vagrant@linux:~/bigrentz/codezone/projects/lift-uis$ npx storybook info

Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
  Binaries:
    Node: 16.20.2 - /usr/bin/node
    npm: 8.19.4 - /usr/bin/npm
  npmPackages:
    @storybook/addon-a11y: ^7.2.1 => 7.2.1
    @storybook/addon-essentials: ^7.2.1 => 7.2.1
    @storybook/addon-interactions: ^7.2.1 => 7.2.1
    @storybook/addon-links: ^7.2.1 => 7.2.1
    @storybook/blocks: ^7.2.1 => 7.2.1
    @storybook/builder-vite: ^7.2.1 => 7.2.1
    @storybook/react: ^7.2.1 => 7.2.1
    @storybook/react-vite: ^7.2.1 => 7.2.1
    @storybook/testing-library: ^0.2.0 => 0.2.0

[Zaehiel]

I still see this issue with "storybook": "^7.3.2"

    "@storybook/addon-actions": "7.3.2",
    "@storybook/addon-essentials": "7.3.2",
    "@storybook/addon-interactions": "7.3.2",
    "@storybook/addon-links": "7.3.2",
    "@storybook/node-logger": "7.3.2",
    "@storybook/preset-create-react-app": "7.3.2",
    "@storybook/react": "7.3.2",
    "@storybook/react-webpack5": "7.3.2",

[ndelangen]

@Zaehiel could you supply me with a reproduction repository?

That way I could investigate.

[matej-marcisovsky]

@ndelangen
I can provide an example file for this issue. I do not know if known class constructors have to be present, but I guess not. This is the exact data from the storybook I captured while switching between stories.

EDIT: [email protected]

test.zip

[matej-marcisovsky]

@ndelangen Hi, did you have time to examine my test file?