Next 12.1.5 error: Failed to parse src "static/media/public/nyan-cat.png" about storybook-addon-next HOT 13 CLOSED

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

from storybook-addon-next.

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.

from storybook-addon-next.

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"

from storybook-addon-next.

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.

from storybook-addon-next.

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

from storybook-addon-next.

Update:

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

from storybook-addon-next.

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

from storybook-addon-next.

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.

from storybook-addon-next.

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

from storybook-addon-next.

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

from storybook-addon-next.

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

from storybook-addon-next.

@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?

from storybook-addon-next.

🎉 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 📦🚀

from storybook-addon-next.