Configure React Storybook for use with Typescript
Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.
Here I show how best to configure a React Storybook to use Typescript (with TSX). This lets you write your reusable components with maximal type safety. Please see the provided code for the full source.
Instructor: [00:00] We are going to add two new files, webpack.config.js in the special storybook folder, and tsconfig.json. We're also going to add a couple of new dependencies, the types definition for react, typescript, and the typescript loader. We're going to head to tsconfig.json and set up the typical tsconfig. The main thing to take note of is to have the jsx field set to react.
[00:23] Now, we're going to head to set up the webpack config inside Storybook. The webpack config requires a special format where they pass you the Storybook's internal webpack config. We're going to use the full config mode to customize it.
[00:40] We take Storybook's default config and we modify it by pushing on extra rules on top of the rules it already has. For ts and tsx files, we're going to require that it use TypeScript loader and also make it recognize ts and tsx files. Make sure to also return default.config at the end.
[01:00] Now that our Storybook can speak TypeScript, it's time to upgrade or button our js file into a tsx file. I've rewritten our button component into a TypeScript React component with extra props with types. You can also add some custom CSS just to make styling look better. Now, when you run Storybook, this is what you should see.
[01:24] Now, if you set up your knobs for your story -- for example, here in the second story I have set up the Boolean knob for the disabled prop which just takes true or false, as well as the text knob for the child text property -- I can also play with them here. For example, here I'm toggling on and off the disabled field, as well as editing the text field.
I had the same issue. I could fix it with additionally installing babel-loader and then @babel/core with "npm install babel-loader" and "npm install @babel/core".
I am having the same issue and will try and debug. Not sure if it is a global install issue, but I will let you know if I get it fixed.
Got the same problem, I had to resolve some issues mainly about missing packages, conflicts between packages etc.
Final package.json that works for me:
{
"name": "react-introducing-design-systems-with-react-and-typescript-in-storybook",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"storybook": "start-storybook -p 6006 -c .storybook"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@storybook/addon-info": "^4.0.0-alpha.23",
"@storybook/addons": "^4.0.0-alpha.23",
"@storybook/react": "^4.0.0-alpha.23",
"@types/react": "^16.4.14",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.0.4",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"storybook-addon-jsx": "^5.4.0",
"typescript": "^3.1.1"
},
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
}
}
Hope it will help someone.
Same issue: Error: It looks like you're using an old webpack version without hooks support
Hope it will help someone.
Thanks! It did help :) In my case I needed these 2 more packages to compile the storyboard:
"@storybook/addon-knobs": "^3.4.8",
"react-textarea-autosize": "^7.0.4",
This way it does not provide .d.ts typings. I find it not so easy to change in to that so interfaces can be exported easily. Any help?
Running into the same issue with "old version without hooks"
What I found works: Go to the documentation for each module when adding it to the app. Follow along with the videos but don't do it verbatim the way the presenter does. Node modules just change so constantly, it's frustrating.
Three months ago, I tried to get React Storybook + TypeScript working and had an lot of trouble. I gave up after trying for a several hours over the course of three days. I watched this course with excitement today because I just knew egghead would get me off to a great start. But, I ran into trouble....
Thankfully, Create React App was updated a few weeks ago to add first-class TypeScript support. I setup a new typescript app using create-react-app, and then followed the now updated instructions on the React Storybook site (https://storybook.js.org/configurations/typescript-config/) which have been updated with the statement: "When using latest create-react-app (CRA 2.0), Babel 7 has native TypeScript support. Setup becomes easier."
And it has gotten easier! Use create-react-app, follow the instructions (way down) on the Storybook docs page, and you'll be up and running pretty quick (I hope).
May the source be with you all.
- AG
Why do the color and text knobs on the bg no longer work?
I think this "TypeScript conversion" went too fast. I mean, this is one of the few courses in egghead that features TypeScript, but it somehow infers that the user already is quite familiar with it. I'm a bit frustrated because I was expecting a more in depth explanation.
Has anyone encountered the issue that webpack does not pick up Typescript interface changes? e.g. you change an interface, and the error won't go away unless you run yarn storybook again.
ERROR in ./src/Button.tsx Module build failed: Error: It looks like you're using an old webpack version without hooks support. If you're using awesome-script-loader with React storybooks consider upgrading @storybook/react to at least version 4.0.0-alpha.3
using @storybook/react v4.0.0-alpha.22 causes: Error: Cannot find module 'babel-loader/package.json' from '/Users/rene/work/react/storybook'
any help ?