Unable to import static file (images) when using tamagui@latest

[akinwale-habibullah]

Current Behavior

On creating a new tamagui starter app using npm create tamagui@latest, which is currently 1.92.0, and selecting the Free - Expo + Next in a production ready monorepo.

I created an assets folder in the packages/app folder and drop some images there.

Currently, if I import the file like this:

import imageName from '../../assets/sampleImage.png'

I get this error:

Cannot find module '../../assets/imageName.png' or its corresponding type declarations.ts(2307)

Expected Behavior

I dont expect any error. I expect to be able to use this image in an Image tag's source prop

Tamagui Version

1.92.0

Platform (Web, iOS, Android)

Web, IOS, Android

Reproduction

Create a new starter using npm create tamagui@latest, and select the `   Free - Expo + Next in a production ready monorepo` template

Create an assets folder in the packages/app folder, drop an image inside and try to import the image in features/home/home.tsx or any component you create

System Info

Cannot find module '../../assets/family-meal-1.jpg' or its corresponding type declarations.ts(2307)

[natew]

Migrated to discussion, this is something you have to set up right and we don't have docs yet, if you want to help document and figure out a good pattern that'd be useful.

[akinwale-habibullah]

Hi Nate, thanks for the timely feedback. How do I set it up right? and I wouldn't mind helping with the documentation. How do I proceed with this?

[akinwale-habibullah]

I resolved the issue by;

1. Adding file-loader dependency to the packages/app directory
2. Adding type declarations to types.d.ts in the packages/app directory

[kirgy]

@akinwale-habibullah do you have specific examples of what this looks like? It would realy help with documentation which I'd be happy to tackle.

[KROT47]

For me worked adding this to packages/app/types.d.ts:

declare global {
  type LocalImageSource =
    | {
        src: string
        width: number
        height: number
        blurDataURL: string
        blurWidth: number
        blurHeight: number
      }
    | number

  declare module '*.png' {
    const content: LocalImageSource
    export default content
  }

  declare module '*.jpg' {
    const content: LocalImageSource
    export default content
  }
}

number is for react native