Storybook: Uncaught SyntaxError: Unexpected token 'default'

[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 https://github.com/storybookjs/storybook/issues/9514#issuecomment-658528692

[baurine]

related comment: https://github.com/storybookjs/storybook/issues/9514#issuecomment-658578009

[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 https://github.com/babel/babel/issues/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.