How to mock Next.js Image component in Storybook?

Question

Next.js introduced a new Image component in v10 that's supposed to be a drop in replacement for the <img> tag.

I'm having an error when trying to view components that import next/image into Storybook:

TypeError: imageData is undefined

I have been trying to override the image object in preview.js (a technique I use for next/router, as documented here) but I get the same error:

// .storybook/preview.js

import Image from 'next/image';

Image = ({ src }) => <img src={src} />;

Any idea how I could override the behaviour of the next/image package in Storybook?

score 9 · Accepted Answer · edited Apr 05 '21 at 08:36

9

I finally managed to make it work.

First we need to define an env variable with the default settings to get rid of the error. We can do this by plugging into webpack in .storybook/main.js:

// .storybook/main.js
var webpack = require('webpack');

module.exports = {
  ...
  webpackFinal: (config) => {
    config.plugins.push(new webpack.DefinePlugin({
      'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
        domains: [],
        path: '/',
        loader: 'default',
      }),
    }));
    return config;
  },
};

Now we can override the default export from next/image package with a functional component that returns a simple <img/> tag.

// .storybook/preview.js

import * as nextImage from 'next/image';

Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: (props) => {
    return <img {...props} />;
  },
});

I'm using the defineProperty static method for this (link to MDN article) since I can't just assign a new value to Image.default.

edited Apr 05 '21 at 08:36

Horai Nuri

5,358
16
75
127

answered Nov 10 '20 at 08:51

drskullster

781
7
20

Note that this is only compatible with webpack v4 and not v5 as of date of this comment – Omar Nasr Mar 11 '21 at 19:10
@OmarNasr As NextJS 11 will be using webpack 5, I am looking forward a compatible solution – Horai Nuri Apr 05 '21 at 08:35
From nextjs version 12.1.5 this solution appears to no longer work :( – Dejan Vasic May 07 '22 at 11:59
Wrote a blog post on an alternative solution: https://dejanvasic.wordpress.com/2022/05/08/next-images-in-storybook/ – Dejan Vasic May 08 '22 at 11:12

score 3 · Answer 2 · answered Dec 11 '20 at 10:19

3

As an addition to the accepted answer:

add var webpack = require('webpack');inside main.js

answered Dec 11 '20 at 10:19

Arseny Bobrov

31
1

How to mock Next.js Image component in Storybook?

2 Answers2