question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

next.js NextImage's broken

See original GitHub issue

I’ve been using the trick here to fix optimized next.js image components:

https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

// .storybook/preview.js
import * as NextImage from "next/image";

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
  configurable: true,
  value: (props) => <OriginalNextImage {...props} unoptimized />,
});

though with latest builds, it seems to be broken. any fixes?

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:11
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

11reactions
knaot0commented, Apr 23, 2022

Thank you @optimista!

it worked by changing the following two points!

  1. webpackFinal returns the altered config
  2. Change the path of "./.storybook/NextImage.js" to "./NextImage.js"
  webpackFinal: async (config) => {
-     config.resolve.alias["next/image"] = require.resolve("./.storybook/NextImage.js");
+     config.resolve.alias["next/image"] = require.resolve("./NextImage.js");
+     return config;
    },
8reactions
optimistacommented, Apr 27, 2022

Encountered same issue. It seems the fix through defineProperty is broken for Storybook 6.4.22 (after: https://github.com/storybookjs/storybook/pull/17875) and also for Storybook 6.5, and might not be working for new versions neither. I did resolve the issue with creating ./.storybook/NextImage.js as following:

import Image from '../node_modules/next/image';
const NextImage = props => <Image unoptimized {...props} />
export default NextImage;

and then creating an alias for next/image by putting this line into webpackFinal function within ./.storybook/main.js

module.exports = {
  ...
  webpackFinal: async (config) => {
    ...
    config.resolve.alias["next/image"] = require.resolve("./.storybook/NextImage.js");
    ...
  }
  ...
}

Note: The import through ../node_modules is necessary not to create a cyclically resolving alias.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Next.js image display as broken image on some pages
when you want import image or file in NextJs, you dont need write Public folder. And you have to give width and height...
Read more >
Fix broken images in React with Next.js - Skillthrive
If your page loads and you see a broken image, it can be pretty jarring and prevent users from exploring your content.
Read more >
Next.js 10 - Images broken in the static export with new ...
There seems to be some issue with the image component, images are working fine in the development but don't work in the static...
Read more >
next/image - Next.js
For a feature overview and usage information, please see the Image Component and Image Optimization documentation. Note: If you are using a version...
Read more >
[Rant] Why can't NextJS and Vercel figure out images? - Reddit
Next are the constant API changes. Why did the image component break? Vercel changed the API yet again! Currently Next Image is completely ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found