Adding Storybook to my TypeScript React component library makes apps that use the published library crash on webpack compilation due to TS errors

I maintain an in-house TypeScript React component library, which is published to a private package repository and used within my company’s front-end apps.

The new features in storybook 6 are amazing and I want to use them in my documentation.

I added storybook to my library, and found that it was pretty easy to set up.

However, I found that if I yarn build && yarn link my library, then yarn link my-library into one of my company’s frontend apps locally, that frontend app will fail to compile. Unexpected TypeScript errors (i.e., errors that do not come up on a tslint or on tsc) cause webpack to crash.

They’re all something along the lines of

ERROR in VisitsSection.tsx
[tsl] ERROR in VisitsSection.tsx(147,10)
      TS2741: Property 'css' is missing in type '{ children: Element; }' but required in type 'Pick<TableFooterProps, "slot" | "style" | "title" | "children" | "onError" | "classes" | "innerRef" | "testID" | "key" | "color" | "component" | "onBlur" | "onFocus" | ... 246 more ... | "css">'.

This error comes up for every single component used from my library in a target app run locally, and it only comes up in that app if I my library was built with storybook and its dependencies installed. The same exact library code, before I installed storybook, did not cause this.

I realize this seems quite difficult to reproduce, but does anyone have any hard-won wisdom about issues pertaining to

• using storybook in a react codebase that is not, itself, already a web app (just a published library?)
• conflicts with different @types/react versions that could be caused by storybook?
• just in general any gotchas or pro-tips about implementing storybook in a pre-existing TypeScript React codebase?

Update

I did a little bit of investigating in my build results, and it seems that the triple-slash type reference for react is missing in my *.d.ts files when I have storybook installed. A comparison:

// ValueContainer.d.ts build result file before installing storybook

/// <reference types="react" />
import { ValueContainerProps } from './ValueContainer.model';
declare function ValueContainer(props: ValueContainerProps): JSX.Element;
export default ValueContainer;

// ValueContainer.d.ts build result file after installing storybook

import { ValueContainerProps } from './ValueContainer.model';
declare function ValueContainer(props: ValueContainerProps): JSX.Element;
export default ValueContainer;

Still not sure what could have been changed about my build process by storybook to cause the triple-slash refs not to be inserted.

[shilman]

@chadlavi-casebook Storybook is designed to be used with both apps and component libraries, so there’s nothing obvious that jumps out to me based on your description.

I’m not familiar with the typescript triple-slash, but a bit of googling makes me think that there’s something funny with your build process. See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html :

[…] Use these directives only when you’re authoring a d.ts file by hand.

@gaetanmaisse @kroeder @lychyi do any of you typescript gurus have any ideas?

[marcbouchenoire]

I’ve encountered the same issue with a similar setup, and it’s because of @emotion/core’s types.

declare module 'react' {
  interface DOMAttributes<T> {
    css?: InterpolationWithTheme<any>
  }
}

declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      css?: InterpolationWithTheme<any>
    }
  }
}

I didn’t want to taint our library types with Omit<..., "css"> so I tweaked our .tsconfig to path map @emotion/core to an empty declaration (not actually empty since empty modules are ignored):

{
  "baseUrl": ".",
  "paths": {
    "@emotion/core": ["declaration.d.ts"]
  }
}

I’m not sure if this is right but it did work in our case.