[Bug]: next/image parameters are not respected.

[kodai3]

Describe the bug

Trying to override parameters for next/image as documented not works.

To Reproduce

https://stackblitz.com/edit/github-datkdu?file=stories%2FPage.stories.js

Go to Page.stories and see the result

System

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.90
    Firefox: 113.0.2
    Safari: 16.4
  npmPackages:
    @storybook/addon-actions: ^7.0.18 => 7.0.18
    @storybook/addon-essentials: ^7.0.18 => 7.0.18
    @storybook/addon-links: ^7.0.18 => 7.0.18
    @storybook/addon-styling: ^1.0.8 => 1.0.8
    @storybook/nextjs: ^7.0.18 => 7.0.18
    @storybook/react: ^7.0.18 => 7.0.18

Additional context

For now, I just re-mocking myself, because the lazy load behavior leads to flaky visual regression test, especially with legacy component.

const NextImage = require('next/image');
const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => {
    return <OriginalNextImage {...props} priority unoptimized loading="eager" />;
  },
});
const NextLegacyImage = require('next/legacy/image');
const OriginalNextLegacyImage = NextLegacyImage.default;
Object.defineProperty(NextLegacyImage, 'default', {
  configurable: true,
  value: (props) => {
    return <OriginalNextLegacyImage {...props} priority unoptimized loading="eager" />;
  },
});

[ka2n]

For now, I just re-mocking myself, because the lazy load behavior leads to flaky visual regression test, especially with legacy component.

The workaround not working anymore for latest Next.js release. ref: #23296
(The original issue may have been resolved, although I haven't been able to verify it for other reasons.)

[kodai3]

I think the issue persist, after updating the dependencies of the repro example and my working repository.

[kodai3]

@valentinpalkovic
Is there any workaround or fix you come up with ?
Now without workaround, This blocks me from upgrading next and storybook

[vanessayuenn]

@kodai3 have you tried the workaround mentioned in this comment?

[kodai3]

@vanessayuenn

this comment means I can't write the workaround like this in the preview.ts with Next.js 13.4.8 and storybook v7.0.26 right ?

const NextLegacyImage = require('next/legacy/image');
const OriginalNextLegacyImage = NextLegacyImage.default;
Object.defineProperty(NextLegacyImage, 'default', {
  configurable: true,
  value: (props) => {
    return <OriginalNextLegacyImage {...props} priority unoptimized loading="eager" />;
  },
});

I'm using this workaround with next v13 and storybook v7.0.18 just fine but I can't upgrade because of that.

I've tried updating the versions without editing preview.ts in this example and I still cant pass the parameters from main.ts

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[kodai3]

What can I do to move this forward ?

[vanessayuenn]

@kodai3 I tried another workaround with defining your own Image module with the desired props, and it seems to do the trick. Let me know if this works for you.

[kodai3]

@vanessayuenn Thank you for the info. It did the trick for me as well.
(I feel its little too complicated for the workaround, still it works.)

I think the goal of the issue you let me know is prety much aligned with this one. Do you think I should close this and discuss there?

[vanessayuenn]

@kodai3 happy to hear that it works! closing this for now so we can keep the discussion in the other issue.

[vladern]

Still happen on version 13.4.19