Storybook Addon for Next.js Image src
Tags: nextjs, storybook, beginners, webdev
Published: 2022-02-06 08:02:54

Recently, I was confronted with the problem that an image doesn't appear in the image component in `storybook`.

I searched for a solution and I found [the issue.](https://github.com/vercel/next.js/issues/18393)
Even though there is already such a solution, it was a little hard to find it. This is why I am writing this post. Actually, there are other ways to solve the problem with some code but I didn't want to write more code in my project.

First, let me show you the problem. I set up a project with a command `npx create-next-app` and made a component.

```javascript
import Image from "next/image";
import styled from "@emotion/styled";

export const IconButton = ({
  src,
  children,
  width = 120,
  onClick,
  iconSize = 24,
}) => {
  return (
    <Button onClick={onClick} width={width}>
      <Image
        src={src}
        width={iconSize}
        height={iconSize}
        alt="icon of the button"
      />
      <Text>{children}</Text>
    </Button>
  );
};

const Button = styled.div`
  box-sizing: border-box;
  width: ${({ width }) => width}px;
  border-radius: 8px;
  height: 40px;
  padding: 8px;
  display: flex;
  alignitems: center;
  column-gap: 6px;
  background-color: #3498db;
  color: white;
  position: relative;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
`;

const Text = styled.div`
  position: absolute;
  top: 0;
  bottom: 10%;
  left: 8px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
`;
```

![folder browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhwxilxpg7kqh3tia98z.png)
 

I downloaded an image(from [here](https://icons8.com/icons/set/home)) and put it to public directory.

Here is a code of the index page and the result.<br />
*Please, ignore the design*

```javascript
import { IconButton } from "../components/IconButton";

export default function Home() {
  return (
    <div>
      <h3>Example</h3>
      <IconButton src="/icons/home.png">Button</IconButton>
    </div>
  );
}
```

![Website Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0umvojahtce2c4j3k39.png)


The image appears well. <br />
Let's look at this in storybook. I added a line in main.js for serving static files.

`.storybook/main.js`
```javascript
module.exports = {
  stories: ["../components/**/*.stories.(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/react",
  staticDirs: ["../public"], // Here
};
```

`IconButton.stories.js`
```javascript
import { IconButton } from ".";

// eslint-disable-next-line import/no-anonymous-default-export
export default {
  title: "components/IconButton",
  component: IconButton,
  args: {
    width: 120,
    iconSize: 24,
    children: "Button",
  },
};

const Template = (args) => <IconButton {...args} />;

export const Home = Template.bind({});

Home.args = {
  src: "/icons/home.png",
};
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugiercu58jovbv562doc.png)

![Image Component src Attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5mjg9emrwxl7326gfiw.png)

The image doesn't appear, right?<br />
The src of the image points `/_next/image`. 

Now, install the package `storybook-addon-next`.

```properties
npm install -D storybook-addon-next
```

Then, add the `addon` to `main.js`.

```javascript
module.exports = {
  stories: ["../components/**/*.stories.(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-next", // Here
  ],
  framework: "@storybook/react",
  staticDirs: ["../public"],
};
```

Restart the storybook. <br />
.....?!<br />
An error occurs. I've encountered it while writing this post, meanwhile I haven't seen any errors in my project.<br />

`Log`
```properties
info @storybook/react v6.4.18
info
info => Loading presets
info => Serving static files from ./.\public at /
(node:14304) DeprecationWarning: You have specified an invalid glob, we've attempted to fix it, please ensure that the glob you specify is valid. See: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Using implicit CSS loaders
info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[12].type should be one of these:
ERR!    "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR!    -> Module type to use for the module
ERR!     at webpack (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\webpack\lib\webpack.js:31:9)
ERR!     at Object.start (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\builder-webpack4\dist\cjs\index.js:92:18)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\dev-server.js:126:28)
ERR!     at async buildDevStandalone (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\build-dev.js:115:31)
ERR!     at async buildDev (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\build-dev.js:161:5)
ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[12].type should be one of these:
ERR!    "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
ERR!    -> Module type to use for the module
ERR!     at webpack (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\webpack\lib\webpack.js:31:9)
ERR!     at Object.start (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\builder-webpack4\dist\cjs\index.js:92:18)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\dev-server.js:126:28)
ERR!     at async buildDevStandalone (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\build-dev.js:115:31)
ERR!     at async buildDev (C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test\node_modules\@storybook\core-server\dist\cjs\build-dev.js:161:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! next-storybook-image-test@ storybook: `start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the next-storybook-image-test@ storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.    

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hskco\AppData\Roaming\npm-cache\_logs\2022-02-06T07_30_05_523Z-debug.log        
PS C:\Users\hskco\OneDrive\바탕 화면\dev\next-storybook-image-test> 
```

The installed package is `storybook-addon-next^1.4.1`. I used `v1.4.0` in my project. So, I'll reinstall the package with `npm install storybook-addon-next@1.4.0`.

![A result that the addon works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9e02x48n0vq8cv9magx.png)

Finally it works! I think there was something wrong with the version `v1.4.1`.<br />
I hope this post will be helpful. Good coding!

---

**+Plus**

I've reported the [storybook-addon-next issue in github](https://github.com/RyanClementsHax/storybook-addon-next/issues/18) and I got the answer from the author.
It was the problem of the `webpack` version.
There is [the guide](https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade) for upgrading the builder from `webpack4` to `webpack5`.
After upgrading it, `storybook-addon-next@1.4.1` works.

If you haven't started your project yet, I'd recommend you to initialize the storybook with `npx sb init --builder webpack5`.