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.
