Docgen: Errors on TS components whose names are keywords

[pelotom]

It appears that a change introduced in 6.0.0-beta.24 is causing my storybook to fail to load:

I'm not sure exactly what is going on here because source maps don't seem to be working.

[shilman]

Works in beta.23? Lots of changes in beta.24...

https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.24

Do you have a repro?

[pelotom]

Yes, it works in 6.0.0-beta.23 and before. I don't have a minimal repro currently, but can work on putting one together.

[baurine]

Meet the same issue by 6.0.0-rc.3, details in #9514 (comment)

[baurine]

related comment: #9514 (comment)

[pelotom]

This seems to happen in cases where a static property is assigned to a component which is exported at its declaration site, e.g.

export default function Foo() {
  return null;
}
Foo.x = 42;

A workaround seems to be separating the export from the declaration:

function Foo() {
  return null;
}
Foo.x = 42;

export default Foo;

Class components with static properties suffer from the same problem:

export default class Foo() {
  static x = 42;
  render() { return null; }
}

and the workaround is the same:

class Foo() {
  static x = 42;
  render() { return null; }
}

export default Foo;

[baurine]

Got it, thanks @pelotom !

[garrrettt]

I just had this exact same issue using Storybook v5.3.19 (current latest) and fixed it with the solution above.

[sibelius]

we got a weird Uncaught SyntaxError: Unexpected token '.' on 6.0.13

after fixing babel loose issue babel/babel#11622

[dangreen]

Uncaught SyntaxError: Unexpected token '.'

switch.stories.jsx:

import Switch from './switch'

export default {
  title: 'UI/Switch',
  decorators: [withKnobs],
  component: Switch,
}

try {
    // @ts-ignore
    switch.displayName = "switch"; // <==
    // @ts-ignore

[sibelius]

for us, the error was because we have some old stories without using CSF format

we just moved most of them to CSF and everything is fixed

[DanielHoffmann]

Still getting this error on storybook v6.0.21 (updating from v5.3.21) and @pelotom workaround works. It is definitely related to assigning after exporting (not only in the story, but anything the story imports).

I tried to create a minimum reproducible project:
https://github.com/DanielHoffmann/storybook-bug

to run:

npm install 
npm run storybook

but I could NOT reproduce the bug in a clean project. I imagine the problem is some mix of dependencies, maybe some babel configuration as I am using a custom webpack config in my storybook project

Also from my tests is also seems related to using this syntax in the code:

export { default as Something } from './someFile'

although I am not 100% sure

Unfortunately my whole codebase uses this pattern:

import gql from 'graphql-tag'
export function Component() {
  ...
}
Component.fragment = gql`
   fragment Component on Type {
      ...
   }
`

so I will refrain from updating until this has been figured out

[machinek56]

I my case the problem was in naming of component - default.tsx, changed it to simple.tsx resolved this issue.

[stale]

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!

[phatNfqAsia]

I also experience this when my 'default.[exported-component]` is not understood by Storybook, which should be consider as unacceptable because the way I write code should not be affected by how a document-purpose framework works.

[sibelius]

it is happening again for us

Uncaught SyntaxError: Unexpected token '.'

can we disable react doc gen?

[sibelius]

related to #11980

[shilman]

closing as dupe to #11980