storybook: addDecorator doesn't work on config.js

Describe the bug I am trying to implement some global style. And I think config.js is the good place to put my code. I copied the addDecorator from the official storybook doc to test. But it shows the error:

in ./.storybook/config.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/ccl/dev/storybook-sandbox/.storybook/config.js: Unexpected token (3:35)

 1 | import { configure, addDecorator } from '@storybook/react';
 2 | 
> 3 | const CenterDecorator = storyFn => <div style={styles}>{storyFn()}</div>;
   |                                    ^
 4 | addDecorator(CenterDecorator);

I am using the create-react-app and @storybook/react": "^5.1.3 It is a problem with Create-react-app?

The addDecorator works fine on individual components but it does not work on config.js

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 28 (15 by maintainers)

Most upvoted comments

Good news, I think @mrmckeb is going to fix this!

shilman on Jul 17, 2019

@justinlazaro-iselect Does creating .storybook/babel.config.js with the following content work?

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
};

shilman on Sep 3, 2019

@ndelangen Thanks for this!

I don’t have a monorepo, it’s a react project setup with react-boilerplate. Currently, I don’t have an issue with the root babel.config.js being picked up in storybook as I changed the config which was conflicting with storybook.

I’m not sure if this is the expected behavior with storybook that it picks root babel.config.js

ravikp7 on May 19, 2020

More detailed steps to reproduce now that I’m not on my phone:

Do not create any babel configuration in the .storybook folder.
Create a babel.config.js file at the root of your repo:

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current'
                }
            }
        ]
    ]
};

Create a custom webpack config for storybook in .storybook/webpack.config.js:

const path = require('path');

module.exports = ({ config }) => {
    config.devtool = 'inline-source-map';
    config.module.rules.push({
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
    });
    config.module.rules.push({
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre'
    });

    return config;
};

In a single .stories.js file, add the following decorator:

storiesOf('My Component', module)
    .addDecorator(getStory => (
        <React.Fragment>
            {getStory()}
        </React.Fragment>
    ))
    .add('some story', () => ( ...

Use storybook 5.0.11 and everything is fine.
Upgrade to storybook 5.1.1 and you get an Unexpected token error on the decorator from step 4.

I’m not sure if step 3 is necessary, but I’ve included it for completeness.

ZebraFlesh on Jun 25, 2019

@shilman @chingchinglcc I had similar problem. Storybook has @babel/core and babel-loader in its peer dependencies and relies on you to install them. Check this link https://storybook.js.org/docs/guides/guide-react/ So, probably, babel-loader is not listed in your dependencies and it could be nested inside different modules in your node_modules directory. Because of that storybook can’t use it and can’t process jsx inside your config file. Let me know if this solution works for you.

Yankovsky on Jun 19, 2019