Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

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

$
0
0

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>