Can't configure Nextjs Image eager loading after upgrading from v6 to v8.3.5

[killthekitten]

Summary

We are using storybook with nextjs, and we recently upgraded two major versions up to v8.3.5. Before the upgrade we used to patch the Next/Image component with the following code in .storybook/preview.js:

const LegacyNextImage = require('next/legacy/image');
const NextImage = require('next/image');
const OriginalLegacyNextImage = LegacyNextImage.default;
const OriginalNextImage = NextImage.default;

Object.defineProperty(LegacyNextImage, 'default', {
  configurable: true,
  value: (props) => (
    <OriginalLegacyNextImage {...props} loading="eager" unoptimized />
  ),
});

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

After the upgrade, we introduced the recommended configuration in .storybook/main.ts:

  framework: {
    name: '@storybook/nextjs',
    options: {
      image: {
        loading: 'eager',
        unoptimized: true,
      },
    },
  },

Now all the image components render with loading="lazy" regardless of what we pass to framework.options.image. How can this be fixed?

Additional information

Current main.ts:

import path from 'path';
import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  staticDirs: ['../public'],

  framework: {
    name: '@storybook/nextjs',
    options: {
      image: {
        loading: 'eager',
        unoptimized: true,
      },
    },
  },

  // This configuration mirrors the `webpack` section of `next.config.js`
  webpackFinal: async (config, { configType }) => {
    if (!config.resolve?.modules || !config.resolve?.fallback)
      throw Error('Invalid webpack configuration object');

    config.resolve.modules.push(path.resolve('./'));
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
    };

    return config;
  },

  docs: {},

  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },
};

export default config;

The preview was cleaned up a bit as well:

import React from 'react';
import { I18nextProvider } from 'react-i18next';

import '../css/animation.scss';
import '../css/app.scss';
import '../css/index.scss';
import i18n from './i18n';

import type { Preview } from '@storybook/react';

const I18nDecorator = (Story: React.FC) => {
  return (
    <I18nextProvider i18n={i18n}>
      <Story />
    </I18nextProvider>
  );
};

const preview: Preview = {
  decorators: [I18nDecorator],
  tags: ['autodocs'],
};

export default preview;

Create a reproduction

When you load this story and right-click on the image, it would show loading="lazy" instead of loading="eager:

https://stackblitz.com/edit/github-1ixds7?file=pages%2Findex.tsx

[karlwills]

I'm also having the same issue. Passing the unoptimized prop directly to the Image component seems to work and it does look like the value is being passed into via the config when running storybook dev -p 6006 --no-open --debug-webpack too.

@killthekitten Did you get anywhere with fixing this at all?

[killthekitten]

Nope, no results yet, I put it on pause for the time being!

[karlwills]

No worries, thanks for getting back to me :)

[killthekitten]

@karlwills we've found a temporary workaround by adding this to the preview configuration:

const preview: Preview = {
  decorators: [I18nDecorator],
  tags: ['autodocs'],
  parameters: {
    nextjs: {
      image: {
        unoptimized: true,
        loading: 'eager',
      },
    },
  },
};