Closed3

Storybook(CSF3.0)を Next.js + Typescript環境に導入する

mittsmasamittsmasa

うまくインストールされてるか確認

yarn storybook

エラーが出力される

Error: error:0308010C:digital envelope routines::unsupported
(中略)
Node.js v17.2.0

Nodeのバージョンを下げれば解消されるらしい
https://penpen-dev.com/blog/error-error0308010cdigital-envelope-routinesunsupportedなエラー/

npm パッケージのn でNodeのバージョン切り替え

$ n 14 latest
$ node -v
v14.18.3

確認

yarn storybook

TailwindCSSでPostCSS 使い続けたかったので

yarn add -D @storybook/addon-postcss
.storybook/main.js
module.exports = {
  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    // add
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  framework: "@storybook/react",
};

このスクラップは2022/01/29にクローズされました