False positive Typescript cannot find module warning

[8enSmith]

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 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, though I'd really like to get rid of this warning. Any ideas how to do so?

I've also posted this question on StackOverflow

[woutervanvliet]

You'll need a declaration similar to this:

declare module '*.svg' {
	import { HTMLAttributes } from 'react'
	const value: React.ComponentType<HTMLAttributes<SVGElement>>
	export default value
}

For my project, I've defined a package (using yarn workspaces) with all of my global types but that might be a bit much to do. I'm not experienced enough though to tell you exactly where to put that file.

This will only help you with the TypeScript error though. Once you've tackled that, you'll run into the tslint warning you're trying to suppress. I'll be following this thread, and your SO question for advice on that.