Custom babel config loading does not work

[radekaz]

I got .babelrc in root directory of my project and I want to override it for storybook as is said in docs (https://getstorybook.io/docs/react-storybook/configurations/custom-babel-config), but I can't do this.

When I got .babelrc only in storybook config (.storybook/.babelrc) , everything works fine.
When I got .bebelrc in .storybook/.babelrc and in root directory, storybook takes .babelrc from root directory.

node version: 7.5.0
npm version: 4.1.2

[danielduan]

Can you paste both .babelrc files?

It looks like the code is behaving as it should, reading from .storybook/.babelrc first and then checking the root.

If you're using the .extends option in your .babelrc, it resolves the path relative to where ever your .babelrc is. That might be where your root configs are getting added.
https://github.com/storybooks/react-storybook/blob/master/src/server/babel_config.js#L51

[danielduan]

This should be working as intended. The only way to configure a custom .babelrc file is to place one in the .storybooks folder. Please reopen if there's another issue related to this.

[percyhanna]

I have been having problems getting this setup. I'm running a Rails 5.1 app, with two .babelrc files:

1. .storybook/.babelrc
2. .babelrc (root folder)

The one in .storybook didn't seem to stick, no matter what I tried. I debugged in babel_config.js, and it appeared to be loading the correct file, however, it wouldn't actually work. I also noticed this code, and wondered if that might be causing conflicts or something.

This is what my two files looked like:

.babelrc

{
  "plugins": [
    "transform-class-properties",
    "transform-decorators-legacy",
    "transform-function-bind",
    "transform-object-rest-spread"
  ],
  "presets": [
    "env",
    "react"
  ]
}

.storybook/.babelrc

{
  "plugins": [
    "transform-class-properties",
    "transform-decorators-legacy",
    "transform-function-bind",
    "transform-object-rest-spread",
    [
      "react-docgen",
      {
        "includeMethods": true,
        "resolver": "findAllComponentDefinitions"
      }
    ]
  ],
  "presets": [
    "env",
    "react"
  ]
}

If I copied the react-docgen plugin to the root .babelrc, then it would work as expected. So something is breaking along the way.

[danielduan]

Do you have a custom webpack config @percyhanna ? If you do, can you paste the contents?

[percyhanna]

Yes I do. The file itself is pretty bare, though, it's basically copying over Webpack config settings from the Rails app's webpack.config.js. Are you looking for something in particular? I can try to assemble wha the final results look like for you.

[percyhanna]

Are you wondering what the babel-loader looks like or something?

[danielduan]

You have to extend the webpack configs in a way that preserves our default settings or else it will default to the root .babelrc.

https://storybook.js.org/configurations/custom-webpack-config/