[Bug]: The @storybook/nextjs framework corrupts images

[bartlangelaan]

Describe the bug

The @storybook/nextjs framework plugin is very fast and easy to setup. However, images don't seem to be working. Not during development, and not in production mode.

If I look at the generated files in the production build, I can see that the image was built, but the end result is corrupted. I can't open the file.

I have reproduced this on two different computers (1 WSL and 1 Mac). The image is build correctly when I replace the nextjs framework plugin with the react-webpack5 framework plugin.

I have pushed a demo repo here: https://github.com/Popup-IO/test-next-sb

To Reproduce

1. npx create-next-app@latest
2. npx sb@next init
3. Place an image in the stories folder, and import it within a story
4. npm run build-storybook
5. Open storybook-static/static/media/my-image.[hash].jpg

Or, use the demo repo and run step 4 & 5.

System

  System:
    OS: Linux 5.10 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 18.7.0 - /mnt/wslg/runtime-dir/fnm_multishells/4783_1673609505642/bin/node
    Yarn: 1.22.19 - /mnt/wslg/runtime-dir/fnm_multishells/4783_1673609505642/bin/yarn
    npm: 8.15.0 - /mnt/wslg/runtime-dir/fnm_multishells/4783_1673609505642/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/addon-interactions: ^7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/addon-links: ^7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/blocks: ^7.0.0-alpha.8 => 7.0.0-beta.20 
    @storybook/nextjs: ^7.0.0-alpha.41 => 7.0.0-beta.20 
    @storybook/react: ^7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/react-webpack5: ^7.0.0-alpha.0 => 7.0.0-beta.20 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

I have also posted this on the Discord with no response.

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.29 containing PR #20615 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[rkrishnasanka]

@shilman When I upgraded to the prerelease, it broke everything, it seems like a couple of dependencies didn't install :

• css-loader
• utils