Stoyybook Addon Next break Storybook when is used with Vite builder about storybook-addon-next HOT 4 CLOSED

module.exports = {
  stories: [...],
  addons: [
    ...
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-vite",
  },
  async viteFinal(config, { configType }) {
    return {
      ...config,
      define: {
          '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',
            experimentalFuture: true
          }),
      },
      resolve: {
         // https://github.com/RyanClementsHax/storybook-addon-next/issues/99#issuecomment-1172943217
         // Creates an extra "div" around the image - may cause some discrepancies between storybook and production
        alias: [
          {
            find: "next/image",
            replacement: "next/future/image",
          },
        ],
      },
    };
  },
};

import * as NextImage from "next/image";

//Tailwind or whatever
import '../index.css';


const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
 configurable: true,
 value: (props) => typeof props.src === 'string' ? (
   <OriginalNextImage {...props} unoptimized blurDataURL={props.src} />
 ) : (
   <OriginalNextImage {...props} unoptimized />
 ),
});