Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the @storybook/nextjs image loader #20615

Merged
merged 1 commit into from
Jan 15, 2023

Conversation

bartlangelaan
Copy link
Contributor

@bartlangelaan bartlangelaan commented Jan 13, 2023

Issue: #20611

This fixes the corrupted images when importing images with the @storybook/nextjs framework. Looking at the file history, it probabily broke with commit 44129a4.

What I did

I compared the webpack loader that exists in Next.js with the webpack loader in Storybook, and saw that the definition of 'raw' was different.
When I changed it so it was the same as the Next.js version, the images were not corrupted after a production build anymore.
That however introduced TS errors, so I reverted the export change made in commit 44129a4 to archive the same.

File in Next.js: https://github.com/vercel/next.js/blob/98df70e233e536188a303eacdf27ca2d1f4cfb19/packages/next/src/build/webpack/loaders/next-image-loader.ts

How to test

  • Is this testable with Jest or Chromatic screenshots?
  • Does this need a new example in the kitchen sink apps?
  • Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

I am not familiar with the Storybook codebase, and because the images are currently broken I assume that there is no test for this yet. I think it is wise to create an E2E test that checks full Next.js compatibility, but I think that is out of scope of this issue.

This fixes the corrupted images when importing images with the @storybook/nextjs framework.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants