storybookjs/storybook

[Bug]: Storybook doesn't take into account strict null checks

Open

#24,620 opened on Oct 30, 2023

View on GitHub
 (1 comment) (1 reaction) (0 assignees)TypeScript (10,058 forks)batch import
addon: controlsbughelp wantedsev:S3typescript

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

Describe the bug

For an Angular project with "strictNullChecks" set to true, developers trying to set null or undefined values where these aren't supported will receive a compilation error.

In Storybook though, when using the Controls plugin, for objects you can always clear them to set a null value. Since Storybook allows you to pass null to properties that don't accept null and would otherwise fail on compilation, errors in the console occur.

To Reproduce

For a new Angular project with Storybook installed, with the example components added (Button, Header, Page).

  1. Open header.component.ts
  2. Remove the ngIf code for the user
  3. In TS, make sure the user can never be null, e.g. user!: User
  4. Run the Storybook app
  5. Go to the Header story page
  6. Clear the object / Set the object to null image

Expected: I shouldn't be allowed to do that... maybe Storybook can detect that or strictNullChecks can be set up for Storybook?

Actual: Errors occur: image

System

Environment Info:

  System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.3570.0), Chromium (118.0.2088.76)   
  npmPackages:
    @storybook/addon-essentials: 7.1.1 => 7.1.1 
    @storybook/addon-interactions: 7.1.1 => 7.1.1 
    @storybook/addon-links: 7.1.1 => 7.1.1 
    @storybook/angular: 7.1.1 => 7.1.1 
    @storybook/blocks: 7.1.1 => 7.1.1 
    @storybook/testing-library: ^0.2.0 => 0.2.1

Additional context

No response

Contributor guide