React Storybook Fails on Demo

Question

I'm attempting to use React Storybook in a project that already has an extensive Webpack 2 config. I started the Storybook following the basic steps:

npm i -g @storybook/cli

getstorybook

When I run yarn storybook , it breaks on the JSX of the demo component:

ERROR in ./stories/index.jsx
Module parse failed: /Users/alexanderhadik/project/web/node_modules/@storybook/react/node_modules/babel-loader/lib/index.js??ref--0!/Users/alexanderhadik/project/web/stories/index.jsx 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)
 @ ./.storybook/config.js 4:2-23
 @ 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

Since I didn't start this project originally using create-react-app - do I need to modify the Storybook webpack config to enable JSX?

Answer 1

This might to be a problem with Storybook not replicating webpack babelrc behaviour exactly.

In my case, I had an empty (just {}) .babelrc file with all the important react/jsx plugins defined in webpack.config.js. Storybook read the .babelrc instead of using the babel settings in webpack.config.js.

Deleting the .babelrc solved that issue.

Answer 2

in my case, i didnt have a .babelrc at all -- i used the entry "babel" in the package.json. when running the storybook in this project, the babel entry wasnt there. i added it and things magically started working.

{
 "name": "root",
 "private": true,
 "devDependencies": {
   "@storybook/addon-actions": "^4.1.11",
   "@storybook/addon-links": "^4.1.11",
   "@storybook/addons": "^4.1.11",
   "@storybook/react": "^4.1.11",
   ...
 },
 "dependencies": {},
 "scripts": {
   "storybook": "start-storybook -p 6006",
   "build-storybook": "build-storybook"
 },
 "babel": {
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react"
   ]
 }
}

i hope this helps someone.