みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Next.jsとstyled-componentsを併用すると、warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0".というワーニングがでるのを解決する 🚨

f:id:kimizuka:20210103011013j:plain

※ next(10.1.2)とstyled-components(5.2.3)にて確認

Next.jsとstyled-componentsを併用すると、yarn や npm install の際に、

warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0".

というワーニングが出るので、若干もやもやしてました。(問題なく動作しているので放置しても良いのですが)

気になったので、調べてみると、少し古いissueが。

github.com

が。僕はすでにv5を使っているので関係なさそうです。

ワーニング的に、react-isのバージョンを上げろということなのでしょう。
僕が明示的にreact-isを導入したわけではないので、現在のバージョンがわかりませんが。
とりあえず、node_modulesの中のreact-isのpackage.jsonを見てみると、

{
  "name": "react-is",
  "version": "16.13.1",
  "description": "Brand checking of React Elements.",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/facebook/react.git",
    "directory": "packages/react-is"
  },
  "keywords": [
    "react"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/facebook/react/issues"
  },
  "homepage": "https://reactjs.org/",
  "files": [
    "LICENSE",
    "README.md",
    "build-info.json",
    "index.js",
    "cjs/",
    "umd/"
  ]
}

16.3.1だ。16.8.0にやや足りてません。

試しに、

yarn add react-is

を実行して、明示的にreact-isを導入してみましょう。

{
  "name": "react-is",
  "version": "17.0.2",
  "description": "Brand checking of React Elements.",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/facebook/react.git",
    "directory": "packages/react-is"
  },
  "keywords": [
    "react"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/facebook/react/issues"
  },
  "homepage": "https://reactjs.org/",
  "files": [
    "LICENSE",
    "README.md",
    "build-info.json",
    "index.js",
    "cjs/",
    "umd/"
  ]
}

確認すると、17.0.2が入りました。

この状態で、一旦node_modulesを消して再度、yarnを実行してみると、無事にワーニングが消えました。

結論

next.jsのpackage.jsonに書かれたreact-isのバージョンがやや古いので、

yarn add react-is

で、react-isを自分で入れればワーニングは消える。

next.js側に不都合はないのか非常に気になりますが、一旦この状態で開発を進めてみます。