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.