Next 13 + Tilewind に Storybook 7 インストール

2023-02-19IT記事,Next.jsNext.js,Storybook,Tilewind

記事日付 2023/02/18

環境

  • Windows11 (WSL)
  • “next": “13.1.6"
  • “tailwindcss": “^3.2.7"
  • “storybook": “^7.0.0-beta.50"

storybookのインストールまたはupdate

npx storybook@next init
npx storybook@next upgrade --prerelease

"’ compilationWARN Force closed preview build ModuleNotFoundError: Module not found: Error: Can’t resolve 'style-loader’ in "’ といったエラー.

@storybook/addon-postcssのインストール

npm install --save-dev @storybook/addon-postcss
または
yarn add -D @storybook/addon-postcss

.storybook/main.ts を変更。ついでにstoriesフォルダの指定も変えます。

import type { StorybookConfig } from '@storybook/nextjs'
const config: StorybookConfig = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
    '../app/**/*.mdx',
    '../app/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

tilewindの読み込み。.storybook/preview.ts

import '../app/globals.css';

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

satisfiesを使っていたら以下のエラー

File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/unplugin/dist/webpack/loaders/load.js
You may need an additional loader to handle the result of these loaders.
|     }
|   }
> } satisfies Meta<typeof Button>);
| export default meta;

わからん。とりあえずsatisfies使わない。 例

import type { Meta, StoryObj } from '@storybook/react'
import { Button } from './Button'

const meta: Meta<typeof UserPrompt> = {
  title: 'Button',
  component: Button,
}

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    ...
  },
}

（まだexampleでエラー出てるけど）とりあえず動いた。