Can't use it with typescript because module not found

[stevemarksd]

trafficstars

I'm getting this error when I check types

To reproduce:

import afrom '../a.png?sizes[]=111'

I wonder how all other people are using this library without running into this issue?

[mormahr]

You can always ignore warnings with a //@ts-ignore comment before the import.

Otherwise you can create a type definition. It would indeed be nice if there was a definition available, but so far i haven't found one and i'm too lazy to create one myself, so i use it as any.

[Porges]

I use a definition like this (in react-app-env.d.ts as I am using create-react-app):

type ResponsiveImageOutput = 
    { src: string
    , srcSet: string
    , placeholder: string
    , images: {path: string, width: number, height: number}[]
    , width: number
    , height: number
    }

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

declare module '*.jpeg' {
    const content: ResponsiveImageOutput
    export default content;
}

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

[ajantsch]

@Porges I tried adding these definitions to my custom.d.ts but the import statement still gives me the Module cannot be found error. Is there anything else necessary to make this work? FYI I'm using webpack, not CRA.

[evoactivity]

For each set of query params I use I add another module definition to my global.d.ts eg

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

declare module '*.png?placeholder=true&sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048' {
  const content: any;
  export default content;
}

Ideally we could use multiple wildcards and just use

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

but that would require this issue to be addressed by typescript https://github.com/microsoft/TypeScript/issues/38638