Storybook: Gatsby + TS + Storybook gives 'babel-preset-react-app' error

[themre]

Storybook does not run when I try to use it inside Gatsby with TypeScript.

To Reproduce
Steps to reproduce the behavior:

1. Use https://github.com/gojutin/gatsby-starter-typescript-deluxe
2. Modify webpack.config.js:

// this is so we're able to run .tsx files
config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve("babel-loader"),
    exclude: /node_modules/,
    options: {
      presets: [["react-app", { flow: false, typescript: true }]],
      plugins: ["babel-plugin-styled-components"],
    },
  }

1. Run yarn build and then yarn storybook (otherwise there is an babel error)
2. See error:

// console
WARNING in ./src/stories/index.stories.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react-app'

// browser error
Uncaught TypeError: (0 , _typeof3.default) is not a function

System:
Stroybook: 5.2.5
gatsby: 2.17.9
gatsby-plugin-typescript: 2.1.15

[breadadams]

I was seeing this too after updating Storybook from 5.1.11 to 5.3.8, however no Gatsby in my case. I've got a similar Storybook webpack config for TS support.

The issue seemed to be that I had mistakenly installed @babel/preset-react instead of babel-preset-react-app. Adding the correct preset resolved the issue.

[albshin]

Upgraded from 5.2.6 to 5.3.8 and got the same error.
Installing babel-preset-react-app solved this issue.

[themre]

Thanks both for this, will give it a try today!

[themre]

hey, sorry it took so long...
I tried it and I still have that browser error. @albshin have you also changed anything in the config?
this is currently setup: https://github.com/gojutin/gatsby-starter-typescript-deluxe/blob/master/.storybook/webpack.config.js

[themre]

i found a repo that works nicely for everything. the only thing that I needed to add was NODE_ENV=test && ... to bypass some stuff like was instructed in the CLI (great work!). this is the repo:
https://github.com/duncanleung/gatsby-typescript-emotion-storybook

from what i can tell is i basically removed:

• @babel/preset-env
• @babel/preset-react

added:

• ts-loader
• babel-preset-react-app

All the config is basically copied from this repo (including .babelrc). So maybe we should update some docs to help other developers? Just not sure exactly if all these steps are mandatory, but for me it helped.

[stale[bot]]

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[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[JabbyPanda]

hmmm, why would storybook 5.13 require babel-preset-react-app that is related to Create React App setup, even if our application is not using that setup ?

[JabbyPanda]

See comment from @mrmckeb here

https://github.com/storybookjs/storybook/issues/8201#issuecomment-536446521

Fact - since Storybook 5.3 and higher babel-preset-react-app is not installed as part of @storybook/react package

I think that Migration.md doc file https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x` and Typescript config doc file
https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md

should mention that piece of information

[shilman]

cc @mrmckeb https://github.com/storybookjs/storybook/commit/942238acc8f2a87e83898d93c789818d391a2f06#diff-b5412b044e81f54a9cadb0982c0aa7c6

[mrmckeb]

This work was done a while ago, but we didn't hit issues with it at the time from memory. @JabbyPanda perhaps react-scripts is in your dependency tree?

[JabbyPanda]

I've searched our package-lock.json for react-scripts and could not find any...

I will try to reproduce this setup issue on some toy Typescript and React project and will get back to you with results

[stale[bot]]

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!

[PaulieScanlon]

@themre I wrote a couple of recipes to help in setting up Storybook + Gatsby and TypeScript / JavaScript. They are both available through the official Gatsby CLI, more info here: https://paulie.dev/posts/2020/05/gatsby-cli-recipes/

[stale[bot]]

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[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!