Always verify import path

[tiagoporto]

In many projects is necessary work with files which isn't a TS/JS file. Some common ones are png, jpg, svg, but when importing this files we get Cannot find module or its corresponding type declarations. error.

Searching how to fix that, we come across many discussions suggesting using the global module declaration, such as:

declare module '*.svg' {
  const content: string
  export default content
}

Links

• Importing images in TypeScript React - “Cannot find module”
• Webpack & Typescript image import
• Typescript image import
• TypeScript "Cannot find module './myFile..." for .scss, .less, images files, wasm...
• Importing SVG files as React Components in TypeScript
  

This approach fix the lint error, but disable TS intellisense.

Example

Folder structure

app
 |
 ├ img
 |  └─ top-view.svg
 |
 └─index.ts

index.ts

No errors, but the correct path is ../img/top-view.svg

Here is the related issue #40333

---

Suggestion

Compiler could still returning missing type declarations for not TS/JS files. But always check if import path results in a file and return an error if not (even if file is not an TS/JS).

[shaianest]

dude its not working as intended the intended way is as if you suggest some thing else or always verify import paths
if you know any way else for module augmentation or any thing els please help others

example fix might look like "you could inerface it so it can validate path and know what its return looks like
example interface "*.svg"{
ReactComponent: JSX.Element
}

"

[aaronadamsCA]

I just noticed this behaviour too. It's a shame - I was hoping to disable ESLint checking import paths, since TypeScript is already doing this for us. But it doesn't notice missing non-JS/TS assets, which is a problem.

Any reason this is tagged "Awaiting More Feedback"? I'm not sure what the documented behaviour was for module augmentations, but I'm pretty sure TS should still be attempting module resolution in spite of the module declaration, shouldn't it?