#NextJS images

57 messages · Page 1 of 1 (latest)

echo geyser
#

Hi everyone, sorry if this question has been answered before but I am not able to get images in storybook, I went through a lot of posts here and modified the preview.js file but still I am not able to get the images when I run storybook and I get this error after modifying the preview.js file - "TypeError: Cannot redefine property: default"

Techstack - NextJS + tailwind

version :
"next": "13.4.13",
"storybook": "^7.2.2"

Here is my preview.js code

import "../src/app/globals.css"

import * as NextImage from "next/image";


const OriginalNextImage = NextImage.default;

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


const preview= {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;
unreal yarrow
echo geyser
#

thankyou @unreal yarrow will check this out

echo geyser
#

so this does not works
src='/next.svg'
but importing the image and then using it works

  src={nextLogo}
unreal yarrow
#

I can't say what's happening without knowing more about your setup. AFAK, the framework replicates NextJS behvaiour and there are no known issues. If you can create a reproduction, we can look into it.

echo geyser
#

My setup is very simple I just installed NextJS with tailwind and then Storybook that's it, did not do anything else and I just tried to get the default homepage in storybook.

unreal yarrow
#

Is it the same issue with all images or just SVG?

echo geyser
#

its the same with all the images

unreal yarrow
#

NextJS <@&1104071723713835068> any suggestions here ⬆️

cedar bobcat
#

I haven’t been able to check out storybook with out next app , but I do know we do not use next/image and we use a webpack library called SVGR. Idk if swapping the implementation out and trying that would help, but you’d at least be able to provide that to the webpack setup of storybook?

limpid relic
echo geyser
limpid relic
#

look in the network tab its probably 404

echo geyser
#

yea 404

limpid relic
#

is src='/next.svg' the right way to write that path

#

can you try some other things like "next.svg" or "public/next.svg" just to experiment

#

does it load on your website normally?

echo geyser
#

Yes it loads on website

limpid relic
#

whats in your main.js/ts

echo geyser
# 
/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;
#

I have not changed anything here

limpid relic
#

when you say you have not changed anything, you mean that you ran sb init and thats all the defaults?

echo geyser
#

yes

#

just added storybook to nextjs and tried to make the default homepage as a story component

limpid relic
#

I wonder if you pass your next.config.js to the options if it would make any difference

echo geyser
limpid relic
#

this is an example

options: {
  nextConfigPath: path.resolve(__dirname, '../next.config.js'),
}
#

thats interesting

#

I wonder if you need to add the public folder to storybooks static dirs

#

you can add in the config

#

staticDirs: ['../public'],

#

thats probably more likely to do it

#

rather than the nextjs config

echo geyser
limpid relic
#

just at the base level

echo geyser
# 
/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
    staticDirs: ['../public']
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

I hope this is what you meant

#

this is still not working

limpid relic
#

thats not what I meant

# 
/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},  
  },
  staticDirs: ['../public']
  docs: {
    autodocs: "tag",
  },
};
export default config;
#

like that

echo geyser
#

yea images are comming now

limpid relic
#

nice!

echo geyser
#

Thankyou

limpid relic
#

No problem 🙂

echo geyser
#

will this work if I have folders inside public ?

limpid relic
#

should if the path is correct

#

like /thing/next.svg

#

if its in a thing folder

#

I think that would work

echo geyser
#

that works aswell

limpid relic
#

love to hear it, I wonder if this kind of config would make sense as the default since next always comes with that public folder

echo geyser
#

I mean at least for newbies like me it would be very helpful

#

we have our project in create-react-app and normal CSS and I was trying to convince my tech lead to migrate to NextJS, TS , tailwind and storybook

limpid relic
#

sounds like a good move to me

echo geyser
#

now Monday I can have a small project setup to show them