Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
timhwang21 opened this issue Oct 12, 2020 · 4 comments

Comments

@timhwang21
Copy link

timhwang21 commented Oct 12, 2020

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
Copy link
Author

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.

@timhwang21 timhwang21 changed the title Re: Enable non-declarative namespaces in Babel Babel config incorrectly read (inaccurate docs + incorrect loading of Babel config functions) Oct 12, 2020
@stale
Copy link

stale bot commented Dec 25, 2020

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!

@stale stale bot added the inactive label Dec 25, 2020
@armandabric
Copy link
Contributor

The comment that explain the issue is now here:

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
Copy link
Member

shilman commented Aug 31, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants