Importing images in TypeScript React - “Cannot find module”

Question

I am trying to import images to use inside a React component with TypeScript. The bundler I\'m using is Parcel (not Webpack).

I have created a .d.ts fil

Answer 1

If you literally wrote "include": ["./src/index.d.ts"] in tsconfig.json and you don't have a "files" setting, that means the project defined by tsconfig.json includes only the single file ./src/index.d.ts. When you open any other file in VS Code, VS Code uses a separate language service instance that doesn't use your tsconfig.json. Adjust your "include" setting to match all the .ts and .tsx files in your project, or just delete it and rely on the default behavior of including all files under the directory containing tsconfig.json.

Round 2

TypeScript is ignoring index.d.ts because it assumes that index.d.ts is generated from index.tsx and index.tsx is more likely to be up to date. Name your index.d.ts file something else, e.g., declaration.d.ts.

Answer 2

Create module/type

# src/types/images.d.ts
declare module '*.jpeg';
declare module '*.jpg';
declare module '*.jpeg';

Change tsconfig.json

{
    "compilerOptions": {
        "typeRoots" : ["node_modules/@types", "src/types"]
    }
}

Answer 3

I've pasted:

// eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

from an older project in my: react-app-env.d.ts and it worked.

Answer 4

create index.d.ts file in folder src,and add this line

declare module '*.jpg';

Answer 5

there is a work around to it for example,

import logo from "../../assets/logo.png"

change this to

const logo =  require("../../assets/logo.png")