storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.45k stars 9.28k forks source link

[Bug]: Excluding .svg files code is not type safe #26438

Open k35o opened 7 months ago

k35o commented 7 months ago

Describe the bug

If configured according to this section of the documentation, TypeScript error occurs at this point.

    const imageRule = config.module.rules.find((rule) => rule?.['test']?.test('.svg'));
    if (imageRule) {
      imageRule['exclude'] = /\.svg$/;
    }

Details of the error are as follows.

Element implicitly has an 'any' type because expression of type '"test"' can't be used to index type 'false | "" | 0 | RuleSetRule | "..."'.
  Property 'test' does not exist on type 'false | "" | 0 | RuleSetRule | "..."'.
Element implicitly has an 'any' type because expression of type '"exclude"' can't be used to index type 'RuleSetRule | "..."'.
  Property 'exclude' does not exist on type 'RuleSetRule | "..."'.

To Reproduce

https://stackblitz.com/edit/github-akhmer?file=.storybook%2Fpreview.ts

System

System:
    OS: macOS 13.6.4
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm <----- active
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.3.1
  npmPackages:
    @storybook/addon-essentials: ^8.0.0 => 8.0.0 
    @storybook/addon-interactions: ^8.0.0 => 8.0.0 
    @storybook/addon-links: ^8.0.0 => 8.0.0 
    @storybook/addon-onboarding: ^8.0.0 => 8.0.0 
    @storybook/blocks: ^8.0.0 => 8.0.0 
    @storybook/nextjs: ^8.0.0 => 8.0.0 
    @storybook/react: ^8.0.0 => 8.0.0 
    @storybook/test: ^8.0.0 => 8.0.0 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.0.0 => 8.0.0 

Additional context

Do npx create-next-app@latest, do npx storybook@latest init, include .storybook/*.ts to tsconfig, then reproduce.

k35o commented 7 months ago

Changing to this part would make it typesafe.

    if (imageRule && imageRule !== '...') {
      imageRule['exclude'] = /\.svg$/;
    }

However, I don't know a good moulding for this part(Now it is misguided by any.).

    const imageRule = config.module.rules.find((rule: any) => rule?.['test']?.test('.svg'));