telejson: [Bug] name2.replace is not a function

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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 11
Comments: 16 (4 by maintainers)

Most upvoted comments

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

ndelangen on Jul 26, 2023

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

ekeijl on Jul 25, 2023

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

stevus on Aug 21, 2023

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",

Zaehiel on Aug 23, 2023

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

TheSlimvReal on Aug 21, 2023

I’ll try and fix this today!

ndelangen on Jul 26, 2023

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 😄

BenjaminVanRyseghem on Jul 25, 2023

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.

Vontus on Jul 20, 2023