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 Solutions

Visual Studio Code “relative import with no known parent package File”

You are probably running the module as a script instead of a module.

Check your launch.json configuration. If not present, add a new one via the gear icon at the debug panel. Check out the official debugging documentation for more info about how to setup launch.json.

And in there, add a new configuration for a python module. Example:

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Module",
            "type": "python",
            "request": "launch",
            "module": "pset_1.${fileBasenameNoExtension}"
        }
    ]
}

If there are more sub packages in your configuration, I consider it a good habit to name them according to the hierarchical structure.

Example for multiple configuration and sub packages:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Module - foo",  // top-level package called "foo"
            "type": "python",
            "request": "launch",
            "module": "foo.${fileBasenameNoExtension}"
        },
        {
            "name": "Python: Module - foo.bar",
            "type": "python",
            "request": "launch",
            "module": "foo.bar.${fileBasenameNoExtension}"
        },
        {
            "name": "Python: Module - foo.buzz",
            "type": "python",
            "request": "launch",
            "module": "foo.buzz.${fileBasenameNoExtension}"
        }
    ]
}

Hope that helps!

Visual Studio Code Magnification Setting Reset

First, try the default hotkey of Ctrl + NumPad0 to reset the zoom level. If that doesn't work, then try the following:

Press Ctrl + Shift + P to open the command pallete.
Type "reset zoom"
Press Enter

Best Answer

Related Solutions

Visual Studio Code “relative import with no known parent package File”

Visual Studio Code Magnification Setting Reset

Related Question