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

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

[albshin]

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

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