Storybook で error:0308010C:digital envelope routines::unsupported というエラーが出た場合の対応方法

このドキュメントの目的

Node.js を v18.x にバージョンアップして、Storybook をビルドしようと build-storybook を実行すると、以下のようなエラーが出ました。

Error: error:0308010C:digital envelope routines::unsupported

このエラーを解消するために集めた情報と解消方法をまとめます。

はっきり特定したわけでは無いですが、Node.js のバージョンが上がったことで、OpenSSL のバージョンも v3 系になったことが原因かもしれません。

補足として、Node.js 17 から OpenSSL3 に変更されました。

Node.js now includes OpenSSL 3.0,...

https://nodejs.org/en/blog/release/v17.0.0/#openssl-3-0

Node.jsのHTTPSなどのAPIで使われるOpenSSLのバージョンが1.1.0から3.0.0にアップデートされました。

https://shisama.hatenablog.com/entry/2021/10/20/114721

また、Storybook はデフォルトで Webpack4 を使うようなので、それも関連しているかもしれません。

Storybook has Webpack4 by default

公式のドキュメントに書いてあります。

Use Webpack5 on Storybook

$ npm i -D @storybook/manager-webpack5 @storybook/builder-webpack5

次に .storybook/main.js に以下の指定を追加します。

  module.exports = {
+   core: {
+     builder: 'webpack5',
+   },

最後に build-storybook を実行してエラーが出なければOKです。

解消後に見つけてしまったのですが、Node 17 でエラーになるよ、というドンピシャの Issue を発見しました。