フローとカスタムWebpackローダー

Question

Webpackを使用して、Reactプロジェクトをフロータイプでビルドします。私は、次のようなsvg-sprite-loaderを使用してSVGファイルをインポートするWebPACKのを設定している：

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

これは私のような「輸入」SVGファイルをすることができます：

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

その後、私のような私のリアクトコンポーネント内のファイルを使用することができますこの：

<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 

これらのSVGファイルがタイプ{id: string}のオブジェクトをエクスポートするか、単にこれらのエラーを完全に無視するようにFlowに伝える適切な方法は何ですか？

Answer 1

私が含まれるように私の.flowconfigファイルを編集した：

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

は、それから私は、ファイル./src/helpers/SVGModules.jsを作成し、入力された：

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

これは、フローは.svg輸出で終わる任意のインポート/必要なファイルだと思います{id:''}であるため、エラーは無視されます。欠点は、存在しないファイルがエラーとして報告されないということです。私はこの問題を解決する助け

出典：

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