Next.jsでStoryBookを使うもModuleNotFoundError

結論

.storybook/webpack.config.jsをを実装してください。 pathは各自の環境に合わせてください。

webpack.config.js

const path = require('path');

module.exports = ({ config }) => {
  config.resolve.alias = {
    '@': path.resolve(__dirname, '../'),
  };

  return config;
};

以上です。

　エラー

以下に結論までの詳細をかきます。

storybookを導入し起動しようとした際に、次のエラーがでてしまった場合について説明します。

terminal

$ npm run storybook

// something

<i> [webpack-dev-middleware] wait until bundle finished
99% end closing watch compilationWARN Force closed preview build
ModuleNotFoundError: Module not found: Error: Can't resolve 
'@/app/components/StyledButton' in '/Users/apple/your-app/stories'
    at <anonymous> (/Users/apple/your-app/node_modules/webpack/lib/Compilation.js:2022:28)

原因

storybookが、@のalias-pathが解決できていないためエラーとなっています。
@のパスを定義してあげると解決します。

解決方法

結論の章と重複するが以下の方法で解決します。

1. .storybook/webpack.config.jsを作成する
2. @のaliasを定義する
3. storybookを再起動する

私の場合は、@がプロジェクトルートを指しており、またプロジェクトルート直下に.storybookがあるため '@': path.resolve(__dirname, '../'), と定義しています。
@のパスは各自の環境ごとに合わせて設定してください。

webpack.config.js

const path = require('path');

module.exports = ({ config }) => {
  config.resolve.alias = {
    '@': path.resolve(__dirname, '../'),
  };

  return config;
};

ちなみに、ディレクトリ構成の一例です。この投稿ではつぎの構成を前提としています。

terminal

. // ← ここに @ aliasを通したい
├── README.md
├── .storybook
│   ├── main.js
│   ├── webpack.config.js // ← 追加
│   └── preview.js
├── app
│   ├── components
│   │   └── StyledButton
│   │       └── index.tsx
│   ...
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages/
├── public/
├── stories
│   ├── Button.stories.ts
│   ├── Button.tsx
│   ├── assets/
│   ...
├── styles/
├── tsconfig.json
└── yarn.lock

storybookの起動

terminal

npm run storybook

ブラウザからアクセス

ブラウザ

http://localhost:6006/

補足

この投稿でのstorybookのバージョンは^7.0.24です。

package.json

{
  ...
  "scripts": {
    ...
  },
  "dependencies": {
    ...
    "next": "13.4.6",
    "react": "18.2.0",
    "typescript": "5.1.3"
  },
  "devDependencies": {
    ...
    "@storybook/addon-essentials": "^7.0.24",
    "@storybook/addon-interactions": "^7.0.24",
    "@storybook/addon-links": "^7.0.24",
    "@storybook/blocks": "^7.0.24",
    "@storybook/nextjs": "^7.0.24",
    "@storybook/react": "^7.0.24",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@types/styled-components": "^5.1.26",
    "storybook": "^7.0.24",
    "styled-components": "^6.0.0-rc.6"
  }
}

まとめ

Qiitaに書いたらまとめを書かなければならない気がしたのでまとめると、
お弁当のつつみ風呂敷のそめ落ち具合で他人のお弁当歴を推測しようとするおばちゃんってなんなんでしょうね。