Storybook: Storybook 5.2 has issues with TypeScript types

[kaiyoma]

Describe the bug
If I upgrade from 5.1 to 5.2, I start getting TypeScript errors in my project:

Module '".../node_modules/@storybook/react/dist/client"' has no exported member 'RenderFunction'.

13 import { RenderFunction } from '@storybook/react';
            ~~~~~~~~~~~~~~

According to issue #8160, we're supposed to remove all @types/storybook... packages, but that makes things worse:

node_modules/@storybook/react/dist/client/preview/index.d.ts:2:23 - error TS2688: Cannot find type definition file for 'webpack-env'.

2 /// <reference types="webpack-env" />
                        ~~~~~~~~~~~

error TS7016: Could not find a declaration file for module '@storybook/addon-knobs/react'. '.../node_modules/@storybook/addon-knobs/react.js' implicitly has an 'any' type.
  Try `npm install @types/storybook__addon-knobs` if it exists or add a new declaration (.d.ts) file containing `declare module '@storybook/addon-knobs/react';`

1 import { text, select } from '@storybook/addon-knobs/react';
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Where are we supposed to be getting the types from? Neither the Storybook package nor the @types package seems to have all the updated types.

[shilman]

@hipstersmoothie did you fix this in next?

[Shadowlauch]

@kaiyoma as a workaround the webpack error can be solved by adding "@types/webpack" to your dependencies.

For the knobs error you need to change the import to "@storybook/addon-knobs" without the "react"

[dawidk92]

I upgraded storybook packages to:

"@storybook/addon-actions": "^5.2.1",
"@storybook/addon-backgrounds": "^5.2.1",
"@storybook/addon-knobs": "^5.2.1",
"@storybook/addon-storyshots": "^5.2.1",
"@storybook/addon-viewport": "^5.2.1",
"@storybook/addons": "^5.2.1",
"@storybook/react": "^5.2.1"

and besides RenderFunction error it throws:

node_modules/@types/storybook__addon-storyshots/index.d.ts:9:10 - error TS2305:
Module '".../node_modules/@storybook/react/dist/client"' has no exported member 'StoryObject'.

9 import { StoryObject } from '@storybook/react';

and:

node_modules/@storybook/addon-knobs/dist/components/types/Color.d.ts:3:29 - error TS7016:
Could not find a declaration file for module 'react-color'. '.../node_modules/react-color/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-color` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-color';`

3 import { ColorResult } from 'react-color';

[hipstersmoothie]

@shilman no I just added DecoratorFn which is similar to StoryFunction in the old types. We currently have no RenderFunction type.

The webpack env stuff is fixed on next though.

Try npm install @types/storybook__addon-knobs if it exists or add a new declaration (.d.ts) file containing declare module '@storybook/addon-knobs/react';

I'm guessing they need to update to latest knobs to get types

@dawidk92 5.2.1 isn't next and doesn't have the bug fixes I think. StoryObject is from the old types too, it will probably need to be added or something similar. The react color thing is fixed on next

[shilman]

@hipstersmoothie @dawidk92 i'll patch those over to master soon and cut a release, probably next week

[dbartholomae]

@shilman Any news? Running into the same problem and I would like to upgrade since the older versions give me problems when using enums in select :)

[shilman]

@dbartholomae Yeah I think everything's been patched over to 5.2.x, so if you upgrade to the latest it should work for you. Closing, and we can re-open if anybody runs into more issues.

[screendriver]

The error still exists:

node_modules/@types/storybook__addon-info/index.d.ts:10:10 - error TS2305: Module '"../../../../../../../../Users/me/project/node_modules/@storybook/react/dist/client"' has no exported member 'RenderFunction'.

10 import { RenderFunction, StoryDecorator } from '@storybook/react';
            ~~~~~~~~~~~~~~

node_modules/@types/storybook__addon-info/index.d.ts:10:26 - error TS2305: Module '"../../../../../../../../Users/me/project/node_modules/@storybook/react/dist/client"' has no exported member 'StoryDecorator'.

10 import { RenderFunction, StoryDecorator } from '@storybook/react';
                            ~~~~~~~~~~~~~~

node_modules/@types/storybook__addon-knobs/index.d.ts:13:10 - error TS2305: Module '"../../../../../../../../Users/me/project/node_modules/@storybook/react/dist/client"' has no exported member 'RenderFunction'.

13 import { RenderFunction } from '@storybook/react';

with following storybook versions:

"@storybook/addon-actions": "5.2.4",
"@storybook/addon-info": "5.2.4",
"@storybook/addon-knobs": "5.2.4",
"@storybook/react": "5.2.4",
"@storybook/theming": "5.2.4",
"@types/storybook__addon-actions": "3.4.3",
"@types/storybook__addon-info": "4.1.2",
"@types/storybook__addon-knobs": "5.0.4",
"@types/storybook__react": "4.0.2",
"storybook-addon-styled-component-theme": "1.2.5",

[screendriver]

Removing @types/storybook__addon-actions, @types/storybook__addon-info and @types/storybook__addon-knobs solved the problem 🎉

[ryancat]

On top of removing the unnecessary types definition files, I found I need to update how to get the API from

import {withKnobs, number} from '@storybook/addon-knobs/react';

to

import {withKnobs, number} from '@storybook/addon-knobs';

[mark-carlson]

The fix for me was to remove ALL @types/storybook... references.

[jonmiles]

Removing all @types/storybook leaves me with a whole bunch of implicit any errors. I do not want to disabled noImplicitAny as that partially defeats the object of using typescript.

[shilman]

@jonmiles The @types/storybook types are meant to be replaced with the storybook-provided types. If you're seeing problems with the new types, can you file an issue / issues? @gaetanmaisse @MichaelDeBoey are in the process of deleting those @types/storybook types from the definitely typed repo...

[jonmiles]

@shilman Then I'm confused, so where do I get the storybook-provided types?

I previously installed the following types, corresponding to addon plugins I have setup:

"@types/storybook__addon-actions": "3.4.3",
"@types/storybook__addon-info": "4.1.2",
"@types/storybook__addon-knobs": "5.0.4",
"@types/storybook__react": "4.0.2",

they almost all threw compilation, inline with this ticket.

The last user's comment before mine was to remove all @types/storybook... which leads to noImplicitAny errors. For now, I have stubbed them explicitly as any but real, working type definitions would be helpful.

[gaetanmaisse]

@jonmiles as Storybook is currently migrating to TS it is not noImplicitAnyproof for now. But we will work on it to make it as soon as we can! To avoid checking SB types when compiling your application you can use skipLibCheck TS flag or override all types that are throwing in your case.

[jonmiles]

@gaetanmaisse Thanks for the clarification, I didn't realise there was an ongoing migration effort but that sounds promising.

However, for me and possibly other developers who are not able (corporate /project policy) to disable noImplicitAny or indeed skipLibCheck this is not an option and is a major headache. Technically I can disable this option it's more political, I'm not going to start a brand new project with weak rules, or bad examples for my team.

Anyway, in the end I've managed to work around it with missing type stubs, so the required libs are typed explicitly as any. In case it helps other, this is what I did to circumvent these issues and move forward with existing ts rules in-tact.

File: 
/missing.d.ts

Content: 
declare module "@storybook/addon-info";
declare module "@storybook/theming/create";
declare module "@storybook/addon-viewport";