Next 12.1.5 error: Failed to parse src "static/media/public/nyan-cat.png"

[rsanchez]

Describe the bug

As of Next 12.1.5, this addon no longer seems to work with Next Image.

Full error message:

Error: Failed to parse src "static/media/public/nyan-cat.png" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)
    at defaultLoader (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55971:23)
    at defaultImageLoader (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55790:16)
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55755:39
    at Array.map (<anonymous>)
    at generateImgAttrs (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55755:24)
    at ImageElement (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55896:183)
    at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:79513:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:82339:13)
    at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:83577:16)
    at HTMLUnknownElement.callCallback (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:68473:14)

Your minimal, reproducible example

https://github.com/rsanchez-forks/storybook-addon-next/tree/next-12.1.5-issue/examples/nextv12

Steps to reproduce

1. In examples/nextv12, run yarn add next@12.1.5
2. Run yarn storybook
3. Go to Nextjs Images Page in storybook
4. Observer error in storybook

Expected behavior

As a user, expect next-image to work within Storybook.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: macOS
• Browser: Chrome
• Version: 100.0.4896.75

storybook-addon-next version

Main branch, Commit hash a7efc09

Additional context

Next 12.1.4 does not have the same issue.

[RyanClementsHax]

Thanks for opening the issue! Do you currently have a workaround?

[rsanchez]

No workaround currently, other than just using Next 12.1.4. Seems like maybe a lot of changes under the hood to next/image in 12.1.5.

[LZL0]

I am experiencing the same issue. I was wondering why, but @rsanchez is probably correct.

[jeroenroumen-acc]

Experiencing the same issue. Reverting to 12.1.4 for now seems to solve it.

[RyanClementsHax]

So it seems that the following code no longer works

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

const OriginalNextImage = NextImage.default;

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

This has been the convention to getting next/image working in storybook for a long time. I'm not sure why it is broken now. This is a compare between next 12.1.4 and 12.1.5 and nothing stands out to me as a major change.

I will continue to look into this, but if anyone has any insight, feel free to chip in.

A more detailed explanation for why this error is occurring is that when optimized={true} on next/image, the loader logic is run and thus creates the problems you are seeing. Because the code that automatically turns this off for you no longer works, you are seeing this error.

[LoicMahieu]

Like @jeroenroumen-acc , rollback to 12.1.4 fix the issue...

[RyanClementsHax]

Thank you all for your patience! I'm working with Next.js to figure out what the issue exactly is and how to remediate it

[RyanClementsHax]

Update:

There is a tentative workaround here. It should be good enough for most use cases

[rsanchez]

@RyanClementsHax Thanks for tracking this down. Is that fix something you plan to incorporate into this plugin? Or are you suggesting we use that fix in our own code?

[RyanClementsHax]

I might put it in the repo but I was hoping to have clarification from the nextjs team if this is a bug on their end first.

I'm kinda torn on what to do. Put a workaround in this repo and risk breaking changes for y'all if nextjs decides to fix this problem, or wait until a decision is reached so we can implement a proper fix if needed.

[github-actions]

🎉 This issue has been resolved in version 1.6.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[RyanClementsHax]

Thanks all for your patience. I know this was frustrating.

[hhimanshu]

I can confirm that after updating to 1.6.4, images rendered correctly on storybook local, and production builds. And also on Chromatic

"storybook-addon-next": "1.6.4"