Typescript errors and says it can't find modules for imports on assets such as images

Question

Not sure how to resolve this. TS isn't liking imports of images. While it works when you actually run the site, for some reason TS doesn't know what they are:

import React, { Component } from 'react';
import SlackIcon from './assets/social/slack-icon-thumb.png';
import TwitterIcon from './assets/social/twitter-icon-small.png';

tsconfig.json

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    "target": "es6",                     /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "es6",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": ["es6"],                      /* Specify library files to be included in the compilation. */
    "moduleResolution": "node",
    "allowJs": true,                     /* Allow javascript files to be compiled. */
     "checkJs": true,                     /* Report errors in .js files. */
    "jsx": "react",
    "noImplicitAny": true,
     "sourceMap": true,                   /* Generates corresponding '.map' file. */
    "outDir": "dist",                   /* Redirect output structure to the directory. */
    "rootDir": "./",                     /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     "removeComments": true,              /* Do not emit comments to output. */
    "strict": true,                      /* Enable all strict type-checking options. */
     "noUnusedLocals": true,                /* Report errors on unused locals. */
     "noUnusedParameters": true,            /* Report errors on unused parameters. */
//    "rootDirs": ["."],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    "typeRoots": [
      "node_modules/@types"
    ],                      /* List of folders to include type definitions from. */
        "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
        "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
//      "resolveJsonModule": true,
        "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true
    },
    "include": [
        "src"
    ],
    "exclude": [
        "/node_modules",
        "**/test"
  ]
}

What does it say when you cursor over the squiggly line? – Diesel Jul 31 '20 at 03:15 — Diesel, Jul 31 '20 at 03:15
sorry, updated it with a better picture – PositiveGuy Jul 31 '20 at 03:20 — PositiveGuy, Jul 31 '20 at 03:20

score 0 · Accepted Answer · answered Jul 31 '20 at 03:28

You need to declare that as a module in a .d.ts file:

declare module "*.png" {
   const value: any;
   export = value;
}

or just

declare module '*.png';

You could make images.d.ts in the src folder and add any custom declarations you need.

Here are two good similar posts:

Importing images in TypeScript React - "Cannot find module"

Typescript image import

Typescript errors and says it can't find modules for imports on assets such as images

1 Answers1