Configure React Storybook for use with Typescript

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 ?

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.