Storybook uses custom babel.config.js file when it shouldn't? Upgraded from 5 to 6

[ghost]

Not sure if this is a bug or as intended.

I was using Storybook 5 and recently upgraded to 6 ("@storybook/react": "^6.0.27") which includes TypeScript support out-the-box (I'm using TypeScript).
However now Storybook is throwing some babel-loader errors, for example:

WARNING in ./src/Paper/Paper.stories.tsx 18:2
Module parse failed: Unexpected token (18:2)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
You may need an additional loader to handle the result of these loaders.
|
| export const Default = () => (
>   <ThemeProvider theme={createTheme()}>
|     <StyledPaper>
|       <Typography>Default paper with dimensions</Typography>
 @ \.)(?=.)[^\\\/]*?\.stories\.tsx)$ (./src sync ^\.(?:(?:^|[\\\/]|(?:(?:(?!(?:^|[\\\/])\.).)*?)[\\\/])(?!\.)(?=.)[^\\\/]*?\.stories\.tsx)$) ./Paper/Paper.stories.tsx
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

To Reproduce
Have a custom babel.config.js file in the root of your directory and storybook will load that, which for me caused the above issues.

Workaround / Fix
To fix this I updated my config .storybook/main.js with the following:

babel: async options => ({ ...options, babelrc: false })

And changed my babel.config.js file to .babelrc

This is just a temporary fix for myself though - perhaps there is a better solution?

Systems

Tested on both Mac and Windows, same issue.

[andrico1234]

I'm having this issue too. it looks build-storybook is failing when there's jsx in the preview.js file.

[shilman]

Do you have a repro repo you can share?

Also, FYI for a better workaround, in addition to babelrc: false there's also configFile: false so you don't need to rename.

[ghost]

Do you have a repro repo you can share?

Also, FYI for a better workaround, in addition to babelrc: false there's also configFile: false so you don't need to rename.

Yeah sure, I have a public repo where I apply the workaround, haven't touched it since I originally raised the issue: https://github.com/Ed-Ed/elements

[shilman]

Aha, I think this is the intended behavior. Maybe in earlier versions of Storybook we only supported .babelrc files and then in 6 we also added babel.config.js? At any rate that's the expected behavior now...

[ghost]

Sounds about right. I'll close this issue then.

[asifsaho]

Thanks, @Ed-Ed for opening this topic and @shilman for making your comment. It works and ended my time-killing tries!