Storybook: Can't run storybook with app based on create-react-app

[denchen]

Issue details

I globally installed storybook's CLI, then ran getstorybook followed by npm run storybook, and it fails with an Unexpected token error in the default ./src/stories/index.js file. I'm running this on an app built on create-react-app (NOT ejected) + React 15 but since upgraded to React 16.

Steps to reproduce

• npm install -g @storybook/cli
• getstorybook
• npm run storybook

This is the output of npm run storybook:

% npm run storybook

> [email protected] storybook /Users/denchen/git/my-app
> start-storybook -p 9009 -s public

info @storybook/react v3.3.13
info 
info => Loading static files from: /Users/denchen/git/my-app/public .
info => Loading custom .babelrc
info => Loading custom addons config.
info => Using default webpack setup based on "Create React App".
webpack built 187e803694c371b5454c in 4129ms                                            
Hash: 187e803694c371b5454c
Version: webpack 3.11.0
Time: 4129ms
                       Asset       Size  Chunks                    Chunk Names
    static/manager.bundle.js    2.62 MB       0  [emitted]  [big]  manager
    static/preview.bundle.js    1.59 MB       1  [emitted]  [big]  preview
static/manager.bundle.js.map    3.22 MB       0  [emitted]         manager
static/preview.bundle.js.map    1.91 MB       1  [emitted]         preview
                  index.html     1.2 kB          [emitted]         
                 iframe.html  583 bytes          [emitted]         
 [204] ./node_modules/@storybook/react/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
 [515] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/react/dist/client/manager/index.js 52 bytes {0} [built]
 [516] ./.storybook/addons.js 85 bytes {0} [built]
 [517] ./node_modules/@storybook/addon-actions/register.js 30 bytes {0} [built]
 [518] ./node_modules/@storybook/addon-links/register.js 30 bytes {0} [built]
 [519] ./node_modules/@storybook/react/dist/client/manager/index.js 404 bytes {0} [built]
 [729] ./node_modules/@storybook/react/dist/client/manager/provider.js 3.31 kB {0} [built]
 [731] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js 64 bytes {1} [built]
 [732] ./node_modules/@storybook/react/dist/server/config/globals.js 105 bytes {1} [built]
 [733] ./node_modules/webpack-hot-middleware/client.js?reload=true 7.35 kB {1} [built]
 [734] ./node_modules/querystring-es3/index.js 127 bytes {1} [built]
 [739] ./node_modules/webpack-hot-middleware/client-overlay.js 2.21 kB {1} [built]
 [744] ./node_modules/webpack-hot-middleware/process-update.js 4.33 kB {1} [built]
 [745] ./.storybook/config.js 135 bytes {1} [built]
 [746] ./node_modules/@storybook/react/dist/client/index.js 1.63 kB {1} [built]
    + 803 hidden modules

ERROR in ./src/stories/index.js
Module parse failed: Unexpected token (9:55)
You may need an appropriate loader to handle this file type.
| import { Button, Welcome } from '@storybook/react/demo';
| 
| storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
| 
| storiesOf('Button', module).add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>).add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
 @ ./.storybook/config.js 4:2-27
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/[email protected] (Global)
• @storybook/[email protected]
• @storybook/[email protected]
• @storybook/[email protected]
• @storybook/[email protected]

Affected platforms

• [email protected]
• [email protected]
• Node v8.9.4

Screenshots / Screencast / Code Snippets (Optional)

[Hypnosphi]

info => Loading custom .babelrc

Can you please share your root .babelrc? What do you use it for, given that you haven't ejected?

[denchen]

My .babelrc:

{
  "env": {
    "production": {
      "plugins": [["emotion", { "hoist": true }]]
    },
    "development": {
      "plugins": [["emotion", { "sourceMap": true, "autoLabel": true }]]
    }
  }
}

This is for Emotion and what I had to add to support it according to their docs

[Hypnosphi]

you need to add babel-preset-env and babel-preset-react there to be able to write your stories in JSX and modern JS

[denchen]

Thank you. In .babelrc I added:

"presets": ["babel-preset-env", "babel-preset-react"]

And now Storybook comes up. Is this documented somewhere and I just missed it, or is this one of those basic React + Babel things that I should already know? (I have very little experience with configuring JS projects, hence my use of Create React App).

[Hypnosphi]

Is this documented somewhere

Yes, if we speak about the fact that storybook picks up your root .babelrc when present:
https://storybook.js.org/configurations/custom-babel-config/

[denchen]

Actually, what I realized was I was using Emotion's babel plugin wrong. I shouldn't have had a .babelrc at all, as I should've relied solely on react-scripts-rewired for that. But for Emotion, I do need a webpack.config.js in Storybook's folder. In any case, Storybook is working for me with CRA + Emotion.

[yskkin]

I saw same error with [email protected] and @storybook/[email protected] even without .babelrc.
Upgrading react-scripts fixes the problem.