Using \ in React display name cause SB js Uncaught SyntaxError: Invalid or unexpected token

[flessard]

Using \ in React display name cause SB js Uncaught SyntaxError: Invalid or unexpected token

To Reproduce
Steps to reproduce the behavior:

1. npx sb init
2. edit src/stories/Button.tsx and add Button.displayName = "UI/Button"; at end of file.
3. run sb
4. See error in console

[shilman]

Do you have a repro repo you can share?

Possibly related: #11419

[flessard]

@shilman
https://github.com/flessard/SB-Bug-12328/

[yannbf]

Hey @flessard, thanks for opening this issue. I assume you're using that displayName in order to have the component hierarchy separators in the storybook menu, is that right?

If so, the way it's done in your repro repo is incorrect. You should do so in the title property of the default export in your stories file (not in every story variation, but just once in the default export), rather than the display name of your actual component.

If you really want to set a display name for that component, it's fine, but special characters such as / are not allowed.

If you change from
Button.displayName = "UI/Button";
to
Button.displayName = "Button";

it should work without issues.

[yannbf]

Here's what I mean:

Remove the displayName from the component:

// Button.tsx
- Button.displayName = 'UI/Button';

Add that to your stories file

// Button.stories.tsx
export default {
-  title: 'Example/Button',
+  title: 'UI/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;

Does that make sense? If not let me know and I'll do some investigation about it! :)

[flessard]

@yannbf no, I don't use the displayName for naming my story, I use it for my internal tool :)

[yannbf]

Thanks for explaining @flessard!

I've done some investigation and added my findings in the react-docgen-typescript-loader repo, the issue is related to that library, which is a dependency react-docgen-typescript-plugin, part of the storybook/react preset.
Unfortunately for now the only way to solve this issue is to make sure that your components' displayName property results in a valid js identifier.

[flessard]

@yannbf any update about this bug ? Thanks :)

[yannbf]

Hey @flessard, I'm afraid other people need to help me out to bring some attention to the issue I opened here. It's been a month since I created it but unfortunately no one responded.

[flessard]

Hi @yannbf, do you think we can fix with https://www.npmjs.com/package/patch-package ?

[yannbf]

Yes, if we do have a fix for it. You could maybe extend the research I started and come up with a proposal? Then we could help along the way!

[flessard]

@yannbf the repo has been archived. I think no fix will be released for this bug.

[shilman]

cc @hipstersmoothie

[hipstersmoothie]

It looks like we need to move the bit of code I used from the loader into the plugin. @yannbf If you want to take a stab at it you'll get a test version of the code when you open a PR. Happy to help how I can.

[flessard]

Any update ?

[flessard]

@hipstersmoothie, @yannbf or @shamin any update about this bug ? Thanks.

[inomdzhon]

@shilman any updates?( I have same issue

[yannbf]

Hey @flessard @inomdzhon thanks for checking up. This issue is bigger than me, I did some investigation but I think the best candidate to fix it is @hipstersmoothie.

@hipstersmoothie sorry I missed your message, but I don't have 100% context to take a stab at the fix and currently I'm quite busy :(