Specific displayName causes syntax error

[Chupriarti]

Describe the bug If react component displayName contains "-" than where will be error in preview: Uncaught SyntaxError: Invalid left-hand side in assignment because it builds in this code:

try {
    // @ts-ignore
    my-button-name.displayName = "my-button-name";
    // @ts-ignore

To Reproduce

1. Install create-react-app with typescript
2. Install storybook with webpack5 support
3. In sample component "src\stories\Button.tsx" set displayName like this:
4. Button.displayName = 'my-button-name'
5. run storybook
6. storybook preview won't load (stops at loading state) and in console will be error messages: Uncaught SyntaxError: Invalid left-hand side in assignment

System Environment Info:

System: OS: Windows 10 10.0.19044 CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1230 V2 @ 3.30GHz Binaries: Node: 16.14.2 - C:\tools\nodejs\node.EXE npm: 8.5.0 - C:\tools\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.50) npmPackages: @storybook/addon-actions: ^6.4.22 => 6.4.22 @storybook/addon-essentials: ^6.4.22 => 6.4.22 @storybook/addon-interactions: ^6.4.22 => 6.4.22 @storybook/addon-links: ^6.4.22 => 6.4.22 @storybook/builder-webpack5: ^6.4.22 => 6.4.22 @storybook/manager-webpack5: ^6.4.22 => 6.4.22 @storybook/node-logger: ^6.4.22 => 6.4.22 @storybook/preset-create-react-app: ^4.1.0 => 4.1.0 @storybook/react: ^6.4.22 => 6.4.22 @storybook/testing-library: ^0.0.11 => 0.0.11

Additional context I am using Framework7 and for some reason I have to add ListItem.displayName = "f7-list-item" in components. Removing this line or modifing it to something like ListItem.displayName = "f7_list_item" fixes syntaxError, but it breakes styles. Is there anyway to use "f7-list-item" as display name? May be some babel config changing?

[omelhoro]

We also encountered this issue. But no idea where it came from. A solution was to add typescript: { reactDocgen: 'react-docgen' }, to the .storybook/main.js.

There are some drawbacks as described here: https://github.com/storybookjs/storybook/issues/9832#issuecomment-674176883 but seems to work fine for now.

[shilman]

Can you try out the following canary in your project and let me know whether it resolves any of your issues (or generates new ones)? We're looking to switch the default docgen from react-docgen-typescript to react-docgen, which is much faster and may also fix some long-standing bugs. Many thanks!

Note that the change is currently only for Vite projects Instructions in the "how to test" section: 👉 https://github.com/storybookjs/storybook/pull/23825

[joelsoedito]

Still having this issue. Changing display name fixed it.