storybook: 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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 5
  • Comments: 16 (6 by maintainers)

Most upvoted comments

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

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