storybook: Docgen: Errors on TS components whose names are keywords

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;

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.

it is happening again for us

Uncaught SyntaxError: Unexpected token '.'

can we disable react doc gen?

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

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

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

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

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

after fixing babel loose issue https://github.com/babel/babel/issues/11622