Flow and custom Webpack loaders

Question

I use Webpack to build my React project with Flow types. I have configured Webpack to import SVG files using svg-sprite-loader as such:

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

This allows me to "import" SVG files as such:

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

Then I can use the files in my React components like this:

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

This causes problems with Flow type checking, of course:

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

What's the proper way to tell Flow that these SVG files export objects with the type {id: string} or simply ignore these errors entirely?

Answer 1

I edited my .flowconfig file to include:

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

Then I created the file ./src/helpers/SVGModule.js and entered:

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

This makes Flow think that any imported/required file that ends in .svg exports {id:''}, so the error is ignored. The downside is that files that don't exist are not reported as an error.

Sources that helped me solve this problem:

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