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.