CODEWITHSUNDEEP
typescriptnext.js
Raynigon
Raynigon

Reputation: 701

Type definitions for next-images

Im using typescript with NextJs and next-images. The Code is:

import css from "./style.sass";
import img from './logo.svg';
import Link from 'next/link';

export default () => <Link href="/">
        <img src={img} className={css.logo}/>
    </Link>;

If no typing is given this error is shown:

Cannot find module './logo.svg'.ts(2307)

Currently i use following typings (typings.ts):

declare module "*.svg" {
    const value: string;
    export default value;
}

declare module "*.png" {
    const value: string;
    export default value;
}

declare module "*.jpg" {
    const value: string;
    export default value;
}

With these typings.ts file the error should be resolved, but it is not. Does anybody had the same error when using it? And is there a better way to write the typings.ts file ?

Upvotes: 2

Views: 19391

Answers (2)

samstr
samstr

Reputation: 190

Update 2020:

TypeScript support is now supported in the next-images package.

All you need to do is add the definitions in next-env.d.ts

https://github.com/twopluszero/next-images#typescript

Upvotes: 7

Raynigon
Raynigon

Reputation: 701

After many hours try and error i found the solution. I had to move the typings.ts to the src/ directory and renamed it to images.d.ts

Explained here: https://webpack.js.org/guides/typescript/#importing-other-assets

It would still be nice to have an answer how the typings can be written in a more generic way.

Upvotes: 1

Related Questions