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:
- Use https://github.com/gojutin/gatsby-starter-typescript-deluxe
- 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"],
},
}
- Run
yarn buildand thenyarn storybook(otherwise there is an babel error) - 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)
Upgraded from
5.2.6to5.3.8and got the same error. Installingbabel-preset-react-appsolved 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/