Flow 和自定义 Webpack 加载器

Question

我使用 Webpack 使用 Flow 类型构建我的 React 项目。我已将 Webpack 配置为使用 svg-sprite-loader 导入 SVG 文件，如下所示：

{
  test: /\.svg$/,
  loader: ['svg-sprite-loader']
}

这让我可以像这样“导入” SVG 文件：

import letterCellSymbol from '../styles/icons/tool-letter.svg'

然后我可以像这样使用我的 React 组件中的文件：

<svg className="icon">
  <use xlinkHref={`#${letterCellSymbol.id}`} />
</svg>

这当然会导致流类型检查出现问题：

Error: src/components/Toolbox.jsx:70
 70: <use xlinkHref={`#${letterCellSymbol.id}`} />
                                          ^^ property `id`. Property not found in
 70: <use xlinkHref={`#${letterCellSymbol.id}`} />
                         ^^^^^^^^^^^^^^^^ String

告诉 Flow 这些 SVG 文件以 {id: string} 类型导出对象或完全忽略这些错误的正确方法是什么？

Answer 1

我编辑了我的 .flowconfig 文件以包括：

[options]
module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/src/helpers/SVGModule.js'

然后我创建了文件./src/helpers/SVGModule.js并输入：

/* @flow */
export default { id: '' }

这使 Flow 认为任何以 .svg 结尾的导入/必需文件都会导出 {id:''}，因此忽略该错误。缺点是不存在的文件不会报告为错误。

帮助我解决此问题的来源：

• .flowconfig documentation
• GitHub Flow issue: How to use declarations to avoid "required module not found" errors? #2092