Configure React Storybook for use with Typescript

InstructorShawn Wang

Share this video with your friends

Send Tweet

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.

Rene
~ 6 years ago

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 ?

Timon Schober
~ 6 years ago

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".

Adam Modras
~ 6 years ago

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.

Milosz
~ 6 years ago

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.

Lukasz Szczepanski
~ 6 years ago

Same issue: Error: It looks like you're using an old webpack version without hooks support

Alexander Zubko
~ 6 years ago

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",
Joonas Kallunki
~ 6 years ago

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?

Garrett
~ 6 years ago

Running into the same issue with "old version without hooks"

Jason Christa
~ 6 years ago

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.

Aaron
~ 6 years ago

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
Steve
~ 6 years ago

Why do the color and text knobs on the bg no longer work?

Halian Vilela
~ 6 years ago

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.

Tomas Rodriguez
~ 5 years ago

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.