False positive Typescript cannot find module warning

Question

I am importing an Icon using the following code:

import Icon from "!svg-react-loader?name=Icon!../images/svg/item-thumbnail.svg"

In Visual Studio Code 1.25.1 I get the following warning from tslint:

[ts] Cannot find module '!svg-react-loader?name=Icon!../images/svg/item-thumbnail.svg'.

I still get this warning even if If I apply a tslint ignore statement:

// tslint:disable-next-line:no-implicit-dependencies

The import works fine (i.e. WebPack builds the bundle with no errors), though I'd really like to get rid of this warning. Any ideas how to do so?

Answer 1

To solve this issue create file in the root of your repository types/images.d.ts with following contents:

declare module '*.svg' {
  import React from 'react';

  interface SVGProps {
    className?: string,
    width?: number,
    height?: number,
  }

  class SVG extends React.Component<SVGProps> {}

  export default SVG;
}

Answer 2

To get tslint allow you to do this

import MyIcon from '!svg-react-loader?name=Icon!./down-arrow.svg'

Use this to your tslint.conf

{
  "rules": {
    "no-implicit-dependencies": [
      true,
      ["!svg-react-loader?name=Icon!."]
    ]
  }
}

It's a bit of a mess, but it works.. in essence, you'll need to have your entire loader string whitelisted.