Как типизировать webpack.config.ts для Storybook?

Question

[Kolya112151]

Пытаюсь настроить svg в storybook, но когда пытаюсь типизировать, выдаёт ошибку из-за типа аргумента RuleSetRule.

// Часть кода, с происходящим:

  if (config.module?.rules) {
    config.module.rules = config.module.rules.map((rule: RuleSetRule) => {
      if (/svg/.test(rule.test as string)) {
        return { ...rule, exclude: /\.svg$/i }
      }
      return rule
    })
  }

// Ошибка, которая появляется:

Argument of type '(rule: RuleSetRule) => webpack.RuleSetRule' is not assignable to parameter of type '(value: false | "" | 0 | RuleSetRule | "..." | null | undefined, index: number, array: (false | "" | 0 | RuleSetRule | "..." | null | undefined)[]) => RuleSetRule'.
  Types of parameters 'rule' and 'value' are incompatible.
    Type 'false | "" | 0 | RuleSetRule | "..." | null | undefined' is not assignable to type 'RuleSetRule'.
      Type 'undefined' is not assignable to type 'RuleSetRule'.ts(2345)

Если я правильно понял, то ошибка связана с тем, что аргумент может иметь значение undefined. Но как решить эту проблему?

Лоадеры

import webpack from 'webpack'
import { BuildOptions } from './types/config'
import { buildCssLoader } from './loaders/buildCssLoader'

export const buildLoaders = (options: BuildOptions): webpack.RuleSetRule[] => {
  const { isDev } = options

  const fileLoader = {
    test: /\.(png|jpe?g|gif|woff2|woff)$/i,
    use: [
      {
        loader: 'file-loader'
      }
    ]
  }

  const svgLoader = {
    test: /\.svg$/,
    use: ['@svgr/webpack']
  }

  const cssLoader = buildCssLoader(isDev)

  const babelLoader = {
    test: /\.(js|jsx|ts|tsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: [
          [
            'i18next-extract',
            {
              locales: ['ru', 'en'],
              keyAsDefaultValue: true
            }
          ]
        ]
      }
    }
  }

  const typescriptLoader = {
    test: /\.tsx?$/,
    use: 'ts-loader',
    exclude: /node_modules/
  }

  return [fileLoader, svgLoader, babelLoader, typescriptLoader, cssLoader]
}

Полная часть конфига для сторибука

import webpack, { RuleSetRule } from 'webpack'
import { BuildPaths } from '../build/types/config'
import path from 'path'
import { buildCssLoader } from '../build/loaders/buildCssLoader'

export default ({ config }: { config: webpack.Configuration }) => {
  const paths: BuildPaths = {
    build: '',
    html: '',
    entry: '',
    src: path.resolve(__dirname, '..', '..', 'src')
  }

  config.resolve?.modules?.push(paths.src)
  config.resolve?.extensions?.push('.ts', '.tsx')

  if (config.module?.rules) {
    config.module.rules = config.module.rules.map((rule: RuleSetRule) => {
      if (/svg/.test(rule.test as string)) {
        return { ...rule, exclude: /\.svg$/i }
      }
      return rule
    })
  }

  config.module?.rules?.push(buildCssLoader(true))

  return config
}

Comments

[WbICHA]

когда пытаюсь типизировать

Зачем? У рула есть тип, зачем ты пытаешься ему другой тип дать?

[Kolya112151]

WbICHA , откуда у него тип? Вообще по гайду делаю, там у чела все нормально, но он это делал года полтора назад. И непонятно что там обновилось, что теперь все по-другому. Да и какой другой тип? В вебпаке у лоадеров прописан тип RuleSetRule[], следовательно у отдельного рула должен быть тип RuleSetRule

[Aetae]

Kolya112151, хз откуда у него тип, но тип у него есть и на несоответствие он ругается. Убери ручной каст, и проверяй заодно в if(rule && ...).

P.S. Гайды от Васяна никогда не были аргументом.)

[Kolya112151]

Aetae, ну частично заработало, хоть и вложенность больше стала, но теперь ему не нравится свойство rule.test

Выдаёт ошибку, с каким-то странным типом

Property 'test' does not exist on type 'RuleSetRule | "..."'.
Property 'test' does not exist on type '"..."'.ts(2339)

Вообще test, это же вроде регулярка, пытался привести её к строке, но тоже не помогло.
Но все равно спасибо)

[Aetae]

Kolya112151, ну ясные же сообщения пишет, что непонятно то? Ты по англицки не разумеешь? Вот гугл-транслейт:

Свойство «test» не существует для типа «RuleSetRule | «...»'.
Свойство "test" не существует для типа ""...."'.ts(2339)

Тип аргумента rule после проверки if(rule && ...) у тебя стал (был "сужен" тайпскиптом до) - RuleSetRule | "...": т.е. или RuleSetRule или "..." - просто строка из точек.
У типа "..." нет свойства test. Естественно такого свойства нет у строки.
Что надо сделать? Вполне очевидно: сузить тип ещё сильнее: if(rule && typeof rule !== 'string' && ...).

[Kolya112151]

Aetae, жесть ахах, но всё заработало, спасибо)) Надо будет ещё изучать тайпскрипт)

Answer 1

[Pavelsiba]

// попробуй вот так

if ((config.module?.rules) !== undefined) {
config.module.rules = config.module.rules.map((rule: RuleSetRule | '...') => {
if (rule !== '...' && rule.test instanceof RegExp && rule.test.toString().includes('svg')) {
return { ...rule, exclude: /\.svg$/i }
}
return rule
}
)
config.module.rules.push({
test: /\.svg$/i,
use: ['@svgr/webpack']
})
}