next.js NextImage's broken

[bonesoul]

I've been using the trick here to fix optimized next.js image components:

https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

// .storybook/preview.js
import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />,
});

though with latest builds, it seems to be broken. any fixes?

[optimista]

Encountered same issue. It seems the fix through defineProperty is broken for Storybook 6.4.22 (after: #17875) and also for Storybook 6.5, and might not be working for new versions neither. I did resolve the issue with creating ./.storybook/NextImage.js as following:

import Image from '../node_modules/next/image';
const NextImage = props => <Image unoptimized {...props} />
export default NextImage;

and then creating an alias for next/image by putting this line into webpackFinal function within ./.storybook/main.js

module.exports = {
  ...
  webpackFinal: async (config) => {
    ...
    config.resolve.alias["next/image"] = require.resolve("./.storybook/NextImage.js");
    ...
  }
  ...
}

Note: The import through ../node_modules is necessary not to create a cyclically resolving alias.

[michalkleiner]

Thanks for the workaround @optimista, it worked a charm for us!

[knaot0]

Thank you @optimista!

it worked by changing the following two points!

1. webpackFinal returns the altered config
2. Change the path of "./.storybook/NextImage.js" to "./NextImage.js"

  webpackFinal: async (config) => {
-     config.resolve.alias["next/image"] = require.resolve("./.storybook/NextImage.js");
+     config.resolve.alias["next/image"] = require.resolve("./NextImage.js");
+     return config;
    },

[iamgoddog]

This didn't work for me at storybook@6.5.0
I found this at nextjs repo vercel/next.js#36417 (comment) and that fixed it for me if I use storybook@6.4.x (didn't work with 6.5.0)

If you're curious, the error I was getting was:

ERR! TypeError: Cannot read property 'push' of undefined
ERR!     at Object.babel (.../node_modules/.pnpm/@storybook+builder-webpack5@6.5.0_t4cqyaxwbtpsab7uej7nin732q/node_modules/@storybook/builder-webpack5/dist/cjs/presets/preview-preset.js:37:18)
ERR!     at .../node_modules/.pnpm/@storybook+core-common@6.5.0_t4cqyaxwbtpsab7uej7nin732q/node_modules/@storybook/core-common/dist/cjs/presets.js:294:28

Using

• pnpm@7.0.0
• next@12.1.6
• webpack@5.72.1

[souppower]

@bonesoul @iamgoddog I'm still @6.4, but this worked for me.

vercel/next.js#36417 (comment)

[iamgoddog]

@bonesoul @iamgoddog I'm still @6.4, but this worked for me.

vercel/next.js#36417 (comment)

Yes it worked @6.4 for me also.

[shilman]

@iamgoddog I believe the push of undefined error is unrelated and was fixed in https://github.com/storybookjs/storybook/releases/tag/v6.5.4 by this PR #18284

[clodal]

Had this issue. Can confirm that this works in 6.5. Thanks!

[Guilherme-Farias]

Anyone using version "^6.5" managed to solve it?

[jakapatb]

It worked on v6.5

// .storybook/preview.js

import * as NextImage from 'next/image';
import React from 'react';

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) =>
    React.createElement(OriginalNextImage, { ...props, unoptimized: true }),
});

Object.defineProperty(NextImage, '__esModule', {
  configurable: true,
  value: true,
});

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.57 containing PR #20028 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.