[Bug]: getImgProps from next/image not supported

[federicocappellotto97]

Describe the bug

If i use the new function unstable_getImgProps from 'next/image' the component doesn't work. I know this function is unstable, but i would be nice to be able to use it even in storybook

(0 , next_image__WEBPACK_IMPORTED_MODULE_3__.unstable_getImgProps) is not a function

To Reproduce

Just use unstable_getImgProps in any nextjs environment.

System

Storybook Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 3.5.1 - ~/.nvm/versions/node/v18.18.0/bin/yarn <----- active
    npm: 10.1.0 - ~/.nvm/versions/node/v18.18.0/bin/npm
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 16.4
  npmPackages:
    @storybook/addon-designs: ^7.0.5 => 7.0.5 
    @storybook/addon-essentials: ^7.5.2 => 7.5.2 
    @storybook/addon-interactions: ^7.5.2 => 7.5.2 
    @storybook/addon-links: ^7.5.2 => 7.5.2 
    @storybook/blocks: ^7.5.2 => 7.5.2 
    @storybook/manager-api: ^7.5.2 => 7.5.2 
    @storybook/nextjs: ^7.5.2 => 7.5.2 
    @storybook/react: ^7.5.2 => 7.5.2 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    @storybook/theming: ^7.5.2 => 7.5.2 
    storybook: 7.5.2 => 7.5.2 
    storybook-dark-mode: ^3.0.1 => 3.0.1

Additional context

No response

[valentinpalkovic]

Hi @federicocappellotto97

Thank you for opening this issue.

Maintaining Next.js support is already a pretty time-consuming task. Maintaining unstable features, which might change over time, is even more challenging. Therefore, please create a new issue as soon as the feature gets stable. Then we might consider to support it. For now, we will not support unstable features from Next.js.

[abernier]

Hi,

getImageProps is now stable from Next 14.1

Using same ex as the doc:

const common = { alt: "Art Direction Example", sizes: "100vw" };
const {
  props: { srcSet: srcSetDesktop },
} = getImageProps({
  ...common,
  width: 1440,
  height: 875,
  quality: 80,
  src: "/flower.jpg",
});

I get the same error:

on

[valentinpalkovic]

Discussed here: https://github.com/storybookjs/storybook/discussions/23588. A PR is also already available. We try to merge it in the next couple of days.