Cannot find module '../../images/Logo.png'.ts(2307) Red Error is Still showing

user_13674248 0
Viewed 821

I'm using a Gatsby starter to customize a website.

The starter I'm using is this: https://github.com/fabien0102/gatsby-starter

Why does the following error: 

Cannot find module '../../images/Logo.png'.ts(2307)

continue to show?

Everything seems to load successfully the logo.png file in localhost but the path ../../images/logo.png is still underlined red (which prevents a successful upload to Netlify).

Here's what the HeaderMenu.tsx file looks like:

Screenshot of HeaderMenu.tsx

I'm still learning and your help will be appreciated.

gatsby typescript reactjs import javascript
1 Answers

This happens mainly because typescript thinks that there are no type definitions for these imports.

  1. Create a declarations.d.ts in your src folder. IE: src/declarations.d.ts.

  2. Add declarations for whichever image format you are trying the import. EX:

declare module '*.jpg' {
  export default `` as string;
}

declare module '*.png' {
  export default `` as string;
}
  1. Reload your file aaaaand voilà, you should be in business.
user_6042560
Related