Type definitions for next-images

Question

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 ?

is the module attempted of being resolved as an `.svg` or a `.ts`? Could you please clarify the error message? — Yeysides, Jun 22 '19 at 03:28
Do you have access to the webpack config? Based on [this answer](https://stackoverflow.com/a/55180310/3908002), it looks like you can use `next.config.js` to use the `svgr` module loader which will let you import svgs. Since you're using react you might want to `import { ReactComponent as Logo } from './logo.svg'` — Yeysides, Jun 22 '19 at 15:57
@Yeysides im already using next-images which does something similiar — Raynigon, Jun 22 '19 at 16:41
It was only the typescript linter who complained about the missing type informations — Raynigon, Jun 22 '19 at 16:48

score 7 · Accepted Answer · answered Mar 07 '20 at 15:07

7

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

answered Mar 07 '20 at 15:07

samstr

190
2
7

score 1 · Answer 2 · answered Jun 22 '19 at 16:47

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.

Type definitions for next-images

2 Answers2