package.jsonのresolutionsで依存パッケージのバージョンを固定

webpack 5で storybookが起動しない

@storybook/builder-webpack5 6.4.19
@storybook/manager-webpack5 6.4.19

直近のリリースでwebpack v5.71.0 がリリースされている。
webpack v5.70.0 であれば正常に動作する。

またpackage.jsonにwebpackを直接指定していなくも、
上述のモジュールがwebpackに依存しているため、webpackがインストールされる。

そのversionが v5.71.0の場合起動時にエラーとなる。

Uncaught TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_5__.motion.custom is not a function

Haru

今回は、ほかモジュールとの依存関係で二種類のwebpackのバージョンが使用されている。

デフォルトがwebpack@4.46.0
@storybook/builder-webpack5@6.4.19と@storybook/manager-webpack5@6.4.19に関しては、webpack@5.71.0

% yarn list webpack
yarn list v1.22.18
├─ @storybook/builder-webpack5@6.4.19
│  └─ webpack@5.71.0
├─ @storybook/manager-webpack5@6.4.19
│  └─ webpack@5.71.0
└─ webpack@4.46.0

@storybook/builder-webpack5内のwebpackのversion指定が、^ 指定のためminor versionの最新までが対象となるため。 (6.x.xは対象外。5.9以上の5系

// builder-webpack5のpackage.json
webpack: "^5.9.0"

今回は、@storybook/builder-webpack5と@storybook/manager-webpack5の2パッケージのwebpackのバージョンをv5.70.0に固定する

Haru

resolutions docs

一律依存バージョンを固定したい場合

// package.jsonのresolutions
"resolutions": {
  "webpack": "5.70.0"
}

個別に指定する場合(今回はこちらの指定

// package.jsonのresolutions
"resolutions": {
  "@storybook/builder-webpack5/webpack": "5.70.0",
  "@storybook/manager-webpack5/webpack": "5.70.0"
}

これにより依存パッケージが下記に更新される

% yarn list webpack
yarn list v1.22.17
├─ @storybook/builder-webpack5@6.4.19
│  └─ webpack@5.70.0
├─ @storybook/manager-webpack5@6.4.19
│  └─ webpack@5.70.0
└─ webpack@4.46.0

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