Babel config incorrectly read (inaccurate docs + incorrect loading of Babel config functions)

[timhwang21]

Describe the bug
Same issue as #11218 is still present in 6.0.26. Refiling a ticket based on the Stale bot's suggestion.

To Reproduce

Same as #11218. In summary:

1. In a Typescript project, declare a non-type-only namespace
2. See that both application and Storybook fails with an error on the namespace
3. In Babel, set allowNamespaces to true in the Typescript settings
4. See that the application no longer errors
5. See that Storybook still errors

I'm currently investigating why this particular Babel option seems to not be getting picked up by Storybook.

System

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.7.0 - /usr/local/bin/node
    Yarn: 1.21.0 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 81.0.1
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.26 => 6.0.26
    @storybook/addon-essentials: ^6.0.26 => 6.0.26
    @storybook/addon-links: ^6.0.26 => 6.0.26
    @storybook/react: ^6.0.26 => 6.0.26

[timhwang21]

I investigated this further, and there appear to be two (fairly minor) problems.

1. The docs are inaccurate as to how Babel configs are picked up.

https://github.com/storybookjs/storybook/blob/next/docs/configure/babel.md#custom-config-file

If your project has a .babelrc file, we'll use that instead of the default config file.

You can also place a .storybook/.babelrc file to use a special configuration for Storybook only.

This isn't accurate. See this comment in the code.

Suggested fix: Specify that only Babel configs nested in .storybook/ will be read.

2. Babel configs written using the config function API are not read properly.

Babel supports dynamic configs by exporting a function taking a single argument api in babel.config.js. However, Storybook doesn't properly handle these. This line coerces the function into an empty object.

Suggested fix: If config instanceof Function, pass the function unchanged to Babel.

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

[armandabric]

The comment that explain the issue is now here:

storybook/lib/core-common/src/utils/load-custom-babel-config.ts

Lines 72 to 78 in cc0550c

	export const loadCustomBabelConfig = async function (
	configDir: string,
	getDefaultConfig: () => TransformOptions
	) {
	// Between versions 5.1.0 - 5.1.9 this loaded babel.config.js from the project
	// root, which was an unintentional breaking change. We can add back project support
	// in 6.0.

[shilman]

Boo-yah!! 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.