Storybook: ModuleBuildError: Module build failed: SyntaxError: Unexpected token

Created on 23 Sep 2017  ·  3Comments  ·  Source: storybookjs/storybook

Just installed storybook into my create-react-app project, and am trying to start storybook for the first time. I followed the manual setup verbatim. Looks like webpack is failing somehow. The error output is huge, but the relevant section seems to be:

 [ ModuleBuildError: Module build failed: SyntaxError: Unexpected token (7:8)

           5 | storiesOf('Button', module)
           6 |     .add('with text', () => (
        >  7 |         <button onClick={action('clicked')}>Hello Button</button>
             |         ^
           8 |     ))
           9 |     .add('with some emoji', () => (
          10 |         <button onClick={action('clicked')}>😀 😎 👍 💯</button>

React version is 15.6.1.

I used the default config.json specified in the instructions, and am only loading the example Button story (none of my own modules).

I'm no webpack expert, so not sure what's going on here.

question / support

All 3 comments

Can you please upload your project to GitHub as a repo if possible? You can leave only the parts related to storybook

You may also want to follow quick start guide and compare the result with what you get with manual setup

Your webpack or babel is missing the react preset.

Yes, turns out it was .babelrc causing the issue. I had a .babelrc file in the root of my project, but it did not have a "presets" field specified. Adding "presets": ["react"] got it working. Thanks @danielduan

Was this page helpful?
0 / 5 - 0 ratings