Storybook: Missing type definitions for Addon-Docs

[laij84]

Describe the bug
Trying to use addon-docs in a typescript storybook results in error:
Could not find a declaration file for module '@storybook/addon-docs/blocks'

To Reproduce
Import a Preview / Meta / Story component from @storybook/addon-docs/blocks in a Component.stories.tsx file.

Expected behavior
Compiler should be able to find type definitions for exported components from @storybook/addon-docs/blocks

Screenshots
NA

Code snippets
NA

System:
System:
OS: macOS Mojave 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.17.3 - ~/.nvm/versions/node/v10.16.0/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Browsers:
Chrome: 77.0.3865.90
Firefox: 68.0
Safari: 12.0.3
npmGlobalPackages:
@storybook/cli: 5.2.1

Additional context
using VSCode 1.38.0

[ollegat]

this error appears when u import components to the .ts or .tsx files. use mdx file.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[gaetanmaisse]

Hmmm I'm unsure about how we can export typings for each @storybook/addon-docs/XXXX "sub-packages" as types entry point of @storybook/addon-docs lib is "dist/public_api.d.ts".

In a nutshell, we try to create an alias for TS types from @storybook/addon-docs/blocks to @storybook/addon-docs/dist/blocks 🤷‍♂ .

[dgreene1]

No one loves having their own .d.ts file to override a library that is lacking types, but... here's my current workaround:

// in a file called typings/addonDocs.d.ts
declare module '@storybook/addon-docs/blocks' {
    /** Delete this type once storybook adds the real type, tracked in issue https://github.com/storybookjs/storybook/issues/8183 */
    export const Title: ()=> JSX.Element;
    /** Delete this type once storybook adds the real type, tracked in issue https://github.com/storybookjs/storybook/issues/8183 */
    export const Subtitle: ()=> JSX.Element;
    /** Delete this type once storybook adds the real type, tracked in issue https://github.com/storybookjs/storybook/issues/8183 */
    export const Description: ()=> JSX.Element;
    /** Delete this type once storybook adds the real type, tracked in issue https://github.com/storybookjs/storybook/issues/8183 */
    export const Primary: ()=> JSX.Element;
    /** Delete this type once storybook adds the real type, tracked in issue https://github.com/storybookjs/storybook/issues/8183 */
    export const Props: ()=> JSX.Element;
    /** Delete this type once storybook adds the real type, tracked in issue https://github.com/storybookjs/storybook/issues/8183 */
    export const Stories: ()=> JSX.Element;
}

[whatasoda]

I met a similar issue when I import @storybook/addon-docs/dist/frameworks/react/extractProps.
I guess we can solve this with:

addons/docs/blocks.d.ts

export * from './dist/blocks';

To be honest, I prefer that this file is .ts not .d.ts but it's difficult since module resolution fails without building dist.

btw, my case is not fixed by this, actually.
If it's ok, could you add appropriate access way for extractProps? I want to create utilities which extends behaviors only for specific cases.

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.36 containing PR #10441 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[doublejosh]

error [email protected]: The engine "node" is incompatible with this module. Expected version ">=10.17". Got "10.16.2"
error Found incompatible module.

[ndelangen]

@doublejosh please upgrade node to 10.17 or higher.