Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docgen: Errors on components whose names are keywords #11980

Closed
preciselywilliam opened this issue Aug 13, 2020 · 21 comments
Closed

Docgen: Errors on components whose names are keywords #11980

preciselywilliam opened this issue Aug 13, 2020 · 21 comments

Comments

@preciselywilliam
Copy link

The storybook project builds fine:
image

When I load the page I get a cryptic Javascript error:
image

My deps are as below (let me know if there are other relevant deps):

    "@storybook/addon-a11y": "^6.0.5",
    "@storybook/addon-actions": "^6.0.5",
    "@storybook/addon-knobs": "^6.0.5",
    "@storybook/addon-links": "^6.0.5",
    "@storybook/addons": "^6.0.5",
    "@storybook/react": "^6.0.5",
    "@storybook/source-loader": "^6.0.5",
    "react": "16.13.1",

Not really sure where to start debugging, any ideas on what could be wrong?

@shilman
Copy link
Member

shilman commented Aug 13, 2020

do you have a repro i can look at? i recently updated that part of the code and it's possible that you're hitting some kind of corner case bug

@preciselywilliam
Copy link
Author

do you have a repro i can look at? i recently updated that part of the code and it's possible that you're hitting some kind of corner case bug

I went through and disabled story by story until I found the one causing the crash. It was below, where Toaster is a function which has to be called as Toaster.create();

export default {
	title: 'Toaster',
	component: Toaster,
};

My mistake, thanks for having a look at the issue. I'll leave the issue open if you want to take further action. @shilman

@TheKnarf
Copy link

TheKnarf commented Aug 28, 2020

I had a similar problem in a project after upgrading Storybook, turned out I head a react component called delete in a file called delete.tsx and at some point Storybook tried to generate some code that looked something like delete.module = ... which caused the SyntaxError. Renaming the component and the file solved it (never checked which one was the problem).

@shilman
Copy link
Member

shilman commented Aug 29, 2020

@TheKnarf

@stale
Copy link

stale bot commented Sep 20, 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale stale bot added the inactive label Sep 20, 2020
@svvitale
Copy link

@TheKnarf nailed this one. A file named delete.tsx causes this failure mode.

@pladaria
Copy link

pladaria commented Oct 27, 2020

Same issue here.
In my case instead of having a file delete.tsx I had a switch.tsx which caused the same problem:
(SyntaxError: Unexpected token '.')

@shilman shilman added P1 and removed P2 labels Oct 28, 2020
@boakenfull
Copy link

Yep, exactly the same issue here - I have switch.tsx which causes the same problem. Changing the file name to somethingElse.tsx everything compiles fine

@loelsonk
Copy link

Same issue, (SyntaxError: Unexpected token '.') and switch.tsx :D

@kilinkis
Copy link

switch.tsx too!

@stale
Copy link

stale bot commented Dec 25, 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale stale bot added the inactive label Dec 25, 2020
@svvitale
Copy link

Still a bug

@Doenja
Copy link

Doenja commented Feb 17, 2021

Same issue. For me it was a folder called switch with an index.tsx. Renaming the folder solved the issue.

@shilman shilman added the todo label Feb 18, 2021
@shilman shilman closed this as completed Feb 18, 2021
@shilman
Copy link
Member

shilman commented Feb 18, 2021

If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize!

@shilman shilman reopened this Feb 18, 2021
@shilman shilman changed the title Storybook crashes on latest version (SyntaxError: Unexpected token '.') Docgen: Errors on components whose names are keywords Feb 21, 2021
@shilman
Copy link
Member

shilman commented Feb 21, 2021

Please upvote the fix in styleguidist/react-docgen-typescript#313

@Deboracgs
Copy link

Same issue. For me it was a folder called switch with an index.tsx. Renaming the folder solved the issue.

same here

@PetterRuud
Copy link

Manually set the display name solved this for me

switch.tsx
...
Switch.displayName = 'Switch';
...

@shilman shilman removed the P1 label Oct 18, 2022
@jorgenbuilder
Copy link

Manually set the display name solved this for me

switch.tsx ... Switch.displayName = 'Switch'; ...

Confirming this solution worked in my case. Nice fix @PetterRuud!

@ndelangen
Copy link
Member

I think this got fixed in 7.0 beta.

@reify-benjamin-solum
Copy link

As of 7.6.4 I'm still seeing this issue in Storybook. Above fixes work.

@andreyna1808
Copy link

Yeps, versions 7.6.12

If you had a problem with the switch component in the storybook, try changing it to "toogle", or similar names. The problem itself is the name guys

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests