Open4
Next.js v12でstorybook v6を起動したら表示がなんかおかしい - webpack4とwebpack5の捻じれ問題
堀川登喜矢
yarn devをした時の表示とyarn storybookをした時の表示が違う
yarn dev
yarn storybook
堀川登喜矢webpackのバージョンの違い問題
Next.js v12がwebpack5を使っているのに対して、storybook v6がwebpack4を利用していることに気がついた。
next/imageなどの表示も上手くできていなかったので、下記のaddonを入れてみて気がついた。
しかも、addonのexampleリポジトリでは明示的にwebpack5を使うようにする記述まで有る。
堀川登喜矢この記事に従ってstorybookにwebpack5を使ってもらう
yarn add --dev @storybook/builder-webpack5 @storybook/manager-webpack5
.storybook/main.js
module.exports = {
core: {
builder: 'webpack5',
},
webpack v4 -> v5の差分系エラーの解決
上記手順が終わったらyarn storybookをすると
Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
のエラーが出たので下記の記事に従ってエラー解決
その他.storybook/main.jsをいじったことでwebpack5の書き方に有っていない系のエラーを解決
参考までにfs系の書き方エラーの解決
堀川登喜矢一応解決
謎の表示崩れは解決！
ただnext/imageの画像の表示がまだうまく行っていない。
