Question

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

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

这允许我进口＆＃34;导入＆＃34;这样的SVG文件：

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

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

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

这会导致Flow类型检查出现问题：

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:''}，因此忽略该错误。缺点是不存在的文件不会报告为错误。

帮我解决这个问题的消息来源：

Flow和自定义Webpack加载器

1 个答案: