Core: Fix babel config handling

[shilman]

Storybook's babel handling is inconsistent / broken.

There are three ways to configure it:

• project babelrc/babel.config
• storybook babelrc/babel.config
• main.js babel/babelDefault

Given this:

• Storybook config should take precedence over project config
• Main config should take precedence over storybook config

Based on experiments in #13811 we observed that there are conditions that break both of these assumptions. In the short term, we should debug this and fix it for 6.3. In the long term we should get rid of the babel config files and make it main.js config only.

Originally posted by shilman in #13811 (comment)

[wagedomain]

Are monorepo setups a consideration as well, with root configs?

[gabiseabra]

In the example linked on #13811 the main babel config is loaded during the webpack build step even though the final babel-loader config has the babelrc option set to false, however this option does not affect loading of babel config files. Adding this to .storybook/main.js fixes it:

{
  babel: (cfg) => ({
    ...cfg,
    babelrc: false,
    configFile: false
  })
}

See differences between config file and babelrc here.
Perhaps adding configFile: false to the object at lib/core-common/src/utils/load-custom-babel-config.ts:51 would solve this?

[alvis]

thx @gabiseabra
It works! Somehow the babel config field is not documented

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.33 containing PR #15928 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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