Make babel configuration more flexible

[ZebraFlesh]

Is your feature request related to a problem? Please describe.
In the root of my repo, I have both a .storybook folder and a config folder. My babel config lives in config/babel.config.js. No matter what I do, I can't make storybook see that babel configuration. I don't see any sort of storybook configuration option for this scenario -- it always wants either ./.storybook/.babelrc or ./.babelrc. I still want to keep storybook configuration in a separate directory since it has inflexible notions of config file names. For example, storybook only accepts webpack.config.js, but today I already have 4 webpack config files and should realistically have something closer to 8 files (project settings / common config / server common config, server dev, server prod / browser common config, browser dev, browser prod).

Describe the solution you'd like
Give me a storybook option that says "my babel configuration is in this file over here". Also, support both JSON5 and JS file formats. Storybook could still have the out of the box limitations of only looking at the configDir's babel configuration and still not reading babel configs from package.json; this solution would allow storybook configurations to co-exist with other, more complex configs (such as webpack SSR via serverless).

Describe alternatives you've considered
Two other options exist:

1. Duplicate my JS-based babel config into .storybook/.babelrc. This is error prone and not a very workable solution; this definitely doesn't work if you're using any sort of JS code/logic to construct your babel config.
2. Leverage PR Handle loading .storybook/babel.config.js (#6633) #6634 so I can read JS file formats. Then, create a .storybook/babel.config.js file whose sole purpose is to import and then re-export my custom configuration. This seems silly, but would at least work. However, most other tools (such as webpack-babel-loader) offer configuration options that allow you to point to a random babel config. It seems like storybook should do the same.

Are you able to assist bring the feature to reality?
no

Additional context
Babel 7.x introduced more and better configuration options, allowing differences between file-relative and project-wide configs. Storybook seems to be stuck on the 6.x notions of configuration, which are outdated. Babel docs: https://babeljs.io/docs/en/config-files

[bessey]

Funnily enough your issue is fixed on the just released 5.1.0 rc.

I can verify as I have just upgraded for exactly the same reason.

[ZebraFlesh]

But how do you consume the babel config from a directory other than .storybook or the root of the repo? I didn't see that in the mentioned PR.

[bessey]

You could symlink it?

…

On Wed, 22 May 2019, 20:51 Zebra Flesh, ***@***.***> wrote: But how do you consume the babel config from a directory other than .storybook or the root of the repo? I didn't see that in the mentioned PR. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#6860>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFM42AXRIBYKG6HJ73EQ6DPWWP2XANCNFSM4HOVA7RQ> .

[ZebraFlesh]

You could symlink it?

Windows environment, so nope.

[leoyli]

I am just cross link to an old issue #6806 here.

[ZebraFlesh]

This feature could be considered part of that larger request. However, this one could be delivered independently and provide plenty of value while also being smaller in scope (IMO).

[ndelangen]

related #6633

[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!