Visual studio code is saying svg image import is typescript error 2307

visual-studio-code

I have a React/Typescript component in which I import an svg (this is built with Webpack's HtmlWebpackInlineSVGPlugin).

import RN_Logo from '../../../public/images/RN_logo.svg';

which I use later on in my render function

<img src={RN_Logo} className="RN__Logo"/>

And it works fine, renders when I build and everything. However the file in VS Code is red, and that line importing it is red and when I hover that line it says

Cannot find module '../../../public/images/RN_logo.svg'. ts(2307)

which is irritating, since it works I can't help but think the error message and marking of the line is wrong and should be turned off – is there a way to do that, preferably one that allows VS code to understand about imported image assets?

Best Answer

  • Ok so my suspicion that the custom.d.ts file was involved somehow was correct. The custom.d.ts file allows typescript to understand how to compile these resources when included in the tsConfig.json, but Visual Studio Code for some reason does not know about the custom.d.ts file - in order to let VS Code know in the files I need to import svg files I need to include a reference path - like so:

    /// <reference path="../../../../custom.d.ts" />
    

    where the path points to the location of the custom.d.ts file.

    however while this has fixed it for my case I have read a bunch of bug reports on similar issues over the last few days and not sure if it will fix any other person's experience of a similar problem, relevant resources

    https://github.com/microsoft/TypeScript/issues/2709 https://github.com/Microsoft/TypeScript/issues/10346

    As an aside, I have to admit that I feel if typescript knows how to compile the module, VS Code should know how to find the module without further work. But it doesn't.

  • Related Question