vscode svg declarations file resolved instead svg file path with react-native and typescript

Viewed 391

Question

Is there way to get Visual Studio Code (VScode) to resolve a svg file with it's path location instead of the declaration.d.ts file location?

Background

The issue has come up in all personal and work related react-native projects that use typescript and svgs. This issue has existed for years...

The Issue:

Svgs do not resolve to their location of definition when given a declaration. Instead they resolve to their type declarations

This happens only with a SVG declaration file which is used to resolve typescript errors for SVG imports. Without this declaration, vscode will correctly resolve to the assets/svg/close.svg file instead of the declaration.d.ts file and it throws a type error for the imported file.

Example

import Close from '../../../assets/svg/close.svg'

Clicking on "go to definition" for '../../../assets/svg/close.svg' will show the declaration.

declarations.d.ts

declare module '*.svg' {
  import React from 'react'
  import { SvgProps } from 'react-native-svg'
  const content: React.FC<SvgProps>
  export default content
}

tsconfig.json file. Noting that typeRoots src/types is the location of the declaration.d.ts file that adds the svg declaration.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "typeRoots": ["./src/types", "node_modules/@types"],
    "baseUrl": ".",
    "composite": true,
    "declarationMap": true,
    "paths": {
      "assets/*": ["src/assets/*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

Example visual navigation right click menu. The file can also be resolved by CMD + clicking on it.

  • The go to definition option should always resolve the file path. Instead it resolves the declaration file shown above.
  • The Go To Type definition option will the React.Element file.

vscode right-click options

0 Answers
Related