storybook: [Bug]: Next/Image doesn't work when I use an import in Storybook 7: next-image-loader-stub with Nx

Describe the bug

Hi, I have a problem with next/image using storybook 7 and next 13, I would like to display an image with an import like:

import myImage from './myImage.jpg';

My problem is as soon as I do the import, without even mounting it in my component, then it shows me this error message:

ERROR in ./libs/ui/src/styles/assets/myImage.jpg undefined
Module build failed (from ./node_modules/@storybook/nextjs/dist/next-image-loader-stub.js):
/Users/PC/Documents/projectName/projectName/node_modules/@storybook/nextjs/dist/next-image-loader-stub.js:1

TypeError: Cannot read properties of undefined (reading 'replace')
    at Object.nextImageLoaderStub (/Users/PC/Documents/projectName/projectName/node_modules/@storybook/nextjs/dist/next-image-loader-stub.js:1:983)

The error seems to come from: next-image-loader-stub

When I use <Image src="/myImage.jpg" /> from the public folder without doing an import, my image displays fine and I don’t get an error.

So the problem seems to come from importing my image (The error is present only on storybook, I tried it on a next project and everything works)

To Reproduce

Here is a simple test having this issue:

import Image from 'next/image';
import myImage from './myImage.jpg';

const MyComponent = () => (
  <Image
   src={myImage}
   alt="myImage"
   width={50}
   height={50}
  />
);

System

Environment Info:

  System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    npm: 7.0.11 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Edge: 112.0.1722.39
    Firefox: 110.0.1
  npmPackages:
    @storybook/core-server: ^7.1.0-alpha.2 => 7.1.0-alpha.2 
    @storybook/nextjs: ^7.1.0-alpha.2 => 7.1.0-alpha.2 
    @storybook/react: ^7.1.0-alpha.2 => 7.1.0-alpha.2

Additional context

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 4
  • Comments: 15 (6 by maintainers)

Most upvoted comments

Hi, Is there any solution? I have been trying to fix this for 2 days

I can try to put something together (an Nx monorepo)

Just running across this now after upgrading to storybook 7 with nx.

@nestoremgi The @storybook/react-vite isn’t appropriate if you want to use Next.js with Storybook. Please follow the instructions here to setup Storybook for Next.js

Hello everyone! Thank you for taking the time to study the subject. This solution of removing '@nx/react/plugins/storybook' from storybook.js/main.js works! Good find. 🎉

Hi all! Just tried this out today! If you’re using the latest version of Nx, when it generates Storybook configuration for Next.js projects it does not add the @nx/react/plugins/storybook addon. The image importing works normally. So, yes, if you were experiencing this issue with Nx, please remove the @nx/react/plugins/storybook addon. If you are experiencing this issue outside Nx, then I don’t know 😃

Here is my repository: https://github.com/mandarini/storybook-next-image

I tried creating a reproduction using nx but everything worked. So I started deleting lines out of my main.ts. For me the culprit was that I had @nx/react/plugins/storybook as one of my addons.

Removing it resolved the errors.