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?

It is unusual to call loader from import ... Maybe it is a better to use webpack for all loader modules and rules . — Nikola Lukic, Aug 07 '18 at 11:04
Is there any real use case of that `Icon` import in your code? otherwise, you may just import the file directly, I've never seen such kind of import used besides node modules (or commonjs.. or whatever), I've always seen direct typescript import for webpack without the "modular" way (which throws a fair error, since I'm really doubting that there is a default export in that case specifically). — briosheje, Aug 07 '18 at 11:18
@briosheje I am making use of https://github.com/jhamlet/svg-react-loader and it uses this import style which I too found new. Even with weback set-up for this loader, the import is still "odd". — Ben Smith, Aug 07 '18 at 11:22
@HardikModha Even with "// @ts-ignore" set the warning is still displayed in VS Code. The code builds fine with WebPack with no warning, so I assume its a TSLint extension issue in VS Code? — Ben Smith, Aug 07 '18 at 11:24
@BenSmith Wow, that's weird. I mean, not weird, but it really sounds like webpack is doing some magic behind the scenes, hence I don't think you can "legally" avoid the ts-warning, because the warning is actually correct, isn't it? — briosheje, Aug 07 '18 at 11:49
@briosheje Yes, I think your right. I'll leave this question here just in case someone know how to remove this annoying warning! — Ben Smith, Aug 07 '18 at 13:19
For the TS Lint warning, look at the documentation https://palantir.github.io/tslint/rules/no-implicit-dependencies/. Haven't tried it, but maybe you could add the loader to the whitelist? `"no-implicit-dependencies": [true, ["!svg-react-loader"]]` — Wouter van Vliet, Oct 15 '18 at 09:18
Thanks for the suggestion @WouterVanVliet, but it didn't work. — Ben Smith, Oct 15 '18 at 13:37

score 0 · Answer 1 · answered Oct 02 '18 at 18:35

0

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;
}

answered Oct 02 '18 at 18:35

Ivan Samovar

323
2
7

1

Consider this type instead: `React.Component>` – Wouter van Vliet Oct 15 '18 at 09:14

score 0 · Answer 2 · answered Oct 15 '18 at 13:57

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.

False positive Typescript cannot find module warning

2 Answers2