npm7でnuxt/storybookがinstall errorになるのを調べた

npmを7にバージョンアップしたらnuxt/storybookが以下のエラーでinstallできなくなった。

エラー内容

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/addon-essentials@6.1.21
npm ERR!   node_modules/@storybook/addon-essentials
npm ERR!     @storybook/addon-essentials@"^6.1.14" from @nuxtjs/storybook@3.3.1
npm ERR!     node_modules/@nuxtjs/storybook
npm ERR!       dev @nuxtjs/storybook@"^3.3.1" from the root project
npm ERR!   peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/addon-actions@6.1.21
npm ERR!   node_modules/@storybook/addon-actions
npm ERR!     @storybook/addon-actions@"6.1.21" from @storybook/addon-essentials@6.1.21
npm ERR!     node_modules/@storybook/addon-essentials
npm ERR!       @storybook/addon-essentials@"^6.1.14" from @nuxtjs/storybook@3.3.1
npm ERR!       node_modules/@nuxtjs/storybook
npm ERR!         dev @nuxtjs/storybook@"^3.3.1" from the root project
npm ERR!   11 more (@storybook/addon-backgrounds, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.4" from react-inspector@5.1.0
npm ERR! node_modules/@storybook/addon-actions/node_modules/react-inspector
npm ERR!   react-inspector@"^5.0.1" from @storybook/addon-actions@6.1.21
npm ERR!   node_modules/@storybook/addon-actions
npm ERR!     @storybook/addon-actions@"6.1.21" from @storybook/addon-essentials@6.1.21
npm ERR!     node_modules/@storybook/addon-essentials
npm ERR!       @storybook/addon-essentials@"^6.1.14" from @nuxtjs/storybook@3.3.1
npm ERR!       node_modules/@nuxtjs/storybook
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

原因

npm7から、peerDependenciesに宣言しているライブラリを自動でインストールすることになったので、
@storybook/addon-essentialsのpeerDependenciesでreact@17.0.1をインストールしてるのに、react-inspector@5.1.0のpeerDependenciesでreact@"^16.8.4"をインストールしようとしてコンフリクトが起きてるっぽい。

解決方法

メッセージに出ている通り、--legacy-peer-depsをつけてinstallすると通りました。

npm install --legacy-peer-deps

ちなみにreact-inspectorのpackage.jsonを見てみたら、すでにpeerDependenciesにreact@17のサポートが入ってるっぽいので、こちらのリリースがされたら解決しそう。

ちなみに--forceとの違いをまだ分かってないので次回は調べて書くぞ...