このサイトは、特にやりたいこともなく無気力に生きる汚い中年おじさんデザイナー佐藤文彦のポートフォリオサイトです。
応援よろしくお願いします。

Vue3とstorybookとsass-loader

2022/04/07

問題

Vue3プロジェクトでsass-loaderを利用した際に 、storybook起動時に以下のエラーがでました。

TypeError: Cannot read properties of undefined (reading 'NormalModule')

解決

sass-loaderの最新を利用した場合、webpack4ではなくwebpack5を利用する必要があるようでした。

storybookのwebpack5対応はexperimentalで、webpack5を使うためには、ライブラリのインストールと、main.jsの修正が必要です。

ライブラリをインストール。

$ yarn add --dev @storybook/builder-webpack5 @storybook/manager-webpac

main.jsの修正

/.storybook/main.jsに以下を追加。

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "webpack5",  // これを追加
  },
}

カテゴリ

新規記事