Vue3: Cannot find module ‘./assets/logo.png’ or its corresponding type declarations

Vue3: Cannot find module ‘./assets/logo.png’ or its corresponding type declarations

If you are encountering the error message “Cannot find module ‘./assets/logo.png’ or its corresponding type declarations” while working with Vue3, don’t worry, you’re not alone. This error is commonly faced by developers when using TypeScript in Vue3 projects. In this blog post, we will explore two possible solutions to resolve this issue.

Solution 1: Declare module augmentation

One way to resolve this error is by declaring module augmentation for the specific file type. This can be done by creating a declaration file with the same name as the module you are importing and appending a `.d.ts` extension to it.
For example, if you are importing a PNG file named `logo.png`, create a file named `logo.png.d.ts` in the same directory. In this declaration file, add the following code:

// logo.png.d.ts
declare module '*.png';

By declaring the module augmentation, TypeScript will recognize the imported PNG file and its corresponding type declarations.

Solution 2: Update TypeScript configuration

Another solution is to update the TypeScript configuration to include the file type declaration. In your `tsconfig.json` file, add the following code:

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "types": ["webpack-env", "node"],
    "typeRoots": ["./src/types", "./node_modules/@types"]
  }
}

Make sure to replace the `typeRoots` paths with the appropriate locations in your project.

Conclusion

The “Cannot find module ‘./assets/logo.png’ or its corresponding type declarations” error in Vue3 can be resolved by either declaring module augmentation or updating the TypeScript configuration. Choose the solution that best fits your project requirements and implement it accordingly. Happy coding!