addDecorator doesn't work on config.js

[allisonc2lee]

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

[ndelangen]

Do you have some custom webpack config? I suppose not, since you're using CRA, but I figure I'd ask anyway.

If I try that in one of our examples it works just fine, so I'm puzzled why it's not working for you.

[shilman]

You can fix it by adding preset-env and preset-react to your babel config. I'm not sure why you need to do this. 😭

[allisonc2lee]

Do you have some custom webpack config? I suppose not, since you're using CRA, but I figure I'd ask anyway.

If I try that in one of our examples it works just fine, so I'm puzzled why it's not working for you.

I think the problem is CRA. addDecorator works fine after I set up my react project with webpack.

[Yankovsky]

@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.

[ZebraFlesh]

You can fix it by adding preset-env and preset-react to your babel config. I'm not sure why you need to do this

This fixed it for me. I also am unclear on why we need to do this. Everything was working just fine with storybook 5.0, but as soon as I upgraded to the 5.1 releases it stopped working. Smells like someone made a breaking change.

[allisonc2lee]

Yes. It fixed for me as well.

[shilman]

Smells like someone made a breaking change.

@ZebraFlesh These are the two explicitly babel-related changes in 5.1. I don't see anything suspicious here, but if anybody wants to dig in, this might be a good place to start: #6634 #6878

These workarounds are not required for every project, so it would be useful to understand what's in common with all the projects here. Are they all CRA projects? What version? @chingchinglcc @ZebraFlesh @Yankovsky

[ZebraFlesh]

Mine is hand rolled, not CRA.

[ZebraFlesh]

Looking over those PRs and combining it with the behavior I’m seeing, it looks SB 5.1 is loading my root babel.config.js file. Previously this only had a simple @babel/preset-env preset; due to a lack of preset-react, JSX wouldn’t parse. I do not have a custom babel config file in the .storybook config folder.

This is hard, because I really wanted the fix from the first PR for a different project. 😢

[ZebraFlesh]

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

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

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

3. 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;
};

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

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

5. Use storybook 5.0.11 and everything is fine.
6. 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]

Definitely still an issue

[shilman]

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

[shilman]

OK here's what's happening: #6634 was an unintentional breaking change. If you used a babel.config.js in your project root prior to 5.1, Storybook would ignore it. Now it's picking it up.

The change was a weird, inconsistent one. The code should probably either read:

  const babelConfig =
    loadFromPath(path.resolve(configDir, '.babelrc')) ||
    loadFromPath(path.resolve(configDir, 'babel.config.js')) ||
    loadFromPath(path.resolve(projectRoot, '.babelrc')) ||
    loadFromPath(path.resolve(projectRoot, 'babel.config.js'));

OR

  const babelConfig =
    loadFromPath(path.resolve(configDir, '.babelrc')) ||
    loadFromPath(path.resolve(configDir, 'babel.config.js'));

Now we're in a funny situation where if we fix it the first way, we'll break a lot more people.

The second one is also a breaking change since we're removing support for project-level config.

My vote is the second fix. And potentially adding the first fix as part of 6.0.

Thoughts @ndelangen @ZebraFlesh @igor-dv ?

[igor-dv]

I think if it was a break change we need to fix it back and wait for the v6.

[ndelangen]

Reading the discussion on the PR by @LukeAskew, it was never supposed to load from the project root.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.10 containing PR #7573 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.10 containing PR #7573 that references this issue. Upgrade today to try it out!

[shilman]

Somehow project root babel.config.js is still being loaded. Repro: https://github.com/dburles/sb-babel-bug

Reopening this 😭

[justinlazaro-iselect]

@ZebraFlesh @chingchinglcc can you give an example fix for this? thanks

[shilman]

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

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

[geraufN26]

Fixed for me

[ravikp7]

Hey @shilman This still doesn't work from me. I'm using v5.3.18 and it's still picking the babel.config.js from the root directory. Specifying custom .storybook/babel.config.js with the above config also doesn't work. But if I remove the root babel.config.js it just works. Is a there a version in which this works, so that I can use it? Thanks!

[shilman]

@ravikp7 have you tried 6.0-beta?

[ravikp7]

@shilman I just tried v6.0.0-beta.8, it is also picking up the root babel.config.js

Let me know if I can provide more debugging info or can contribute in any way to help fix this :)

[ndelangen]

@ravikp7 do you have a main.js file for storybook configuration?

Add a babel property there like so:

module.exports = {
  babel: async (babelConfig) => {
    // do anything with the babel config for preview
    return babelConfig;
  },
};

That should allow you to change the babel config exactly to your liking.

I assume you have a monorepo and there's many babel configs in your project?
Or what else is the reason you do not want storybook to pick up the babel.config.js in the root of your project?

[ravikp7]

@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

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ndelangen]

config.js is no longer supported in storybook 7.0 beta