Recently, I encountered an issue while trying to import a png image in my Typescript code. Here is the snippet of code that caused the error:
import paySuccessIcon from "@/assets/icons/pay/pay-success.png";
When I tried to import the image, Visual Studio Code displayed the following error message:
Cannot find module '@/assets/icons/pay/pay-success.png' or its corresponding type declarations.ts(2307)
No quick fixes available
Despite verifying that the png file exists and the path is correct, I couldn't figure out why the error occurred. Can anyone provide insights on why this happened and suggest a solution to avoid this issue? Additionally, below is a snippet of my vite.config.ts file:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'node:path';
import dts from 'vite-plugin-dts';
import { resolve } from 'path';
// Vite configuration
export default defineConfig({
plugins: [
react(),
dts({
insertTypesEntry: true,
})
],
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'rd-component',
formats: ['es'],
fileName: (format) => `rd-component.${format}.js`
},
assetsDir: 'src/assets',
sourcemap: true,
rollupOptions: {
external: ['react', 'react-dom', 'styled-components'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'styled-components': 'styled',
},
},
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
})