0

I have typescript issues when importing images in a React app. It says:

Cannot find module 'assets/images/header.jpeg' or its corresponding type declarations.

Here is the code:

//@ts-ignore
import header from "assets/images/header.jpeg";
//@ts-ignore
import img1 from "assets/images/1.png";
//@ts-ignore
import img2 from "assets/images/2.png";
//@ts-ignore
import img3 from "assets/images/3.png";
//@ts-ignore
import img4 from "assets/images/4.png";

This is quite ugly. Yet, I've added the "assets" path in webpack as well as in tsconfig.

// webpack

alias: {
        api: path.resolve(__dirname, "src/api/"),
        assets: path.resolve(__dirname, "src/assets/"),
        components: path.resolve(__dirname, "src/components/"),
        containers: path.resolve(__dirname, "src/containers/"),
        i18n: path.resolve(__dirname, "src/i18n/"),
        models: path.resolve(__dirname, "src/models/"),
        pages: path.resolve(__dirname, "src/pages/"),
        src: path.resolve(__dirname, "src/"),
        stores: path.resolve(__dirname, "src/stores/"),
        utils: path.resolve(__dirname, "src/utils/"),
      },
      
      // tsconfig
       "paths": {
      "api/*": ["src/api/*"],
      "assets/*": ["src/assets/*"],
      "components/*": ["src/components/*"],
      "containers/*": ["src/containers/*"],
      "i18n/*": ["src/i18n/*"],
      "models/*": ["src/models/*"],
      "pages/*": ["src/pages/*"],
      "src/*": ["src/*"],
      "stores/*": ["stores/*"],
      "utils/*": ["src/utils/*"]
    },

I would like to either fix this, or at least being able to ignore this import issues in a single line, without bypassing the whole file. The images are correctly imported, I can display them.

DoneDeal0
  • 5,273
  • 13
  • 55
  • 114

0 Answers0