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)
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.jsHello everyone! Thank you for taking the time to study the subject. This solution of removing
'@nx/react/plugins/storybook'
fromstorybook.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 mymain.ts
. For me the culprit was that I had@nx/react/plugins/storybook
as one of my addons.Removing it resolved the errors.