yarnを使ったパッケージインストール時に警告をちゃんと読んでおくと余計なトラブルを避けられる 〜react-leafletで苦労した話〜

$ npx create-next-app sample-page --typescript
# 当時はバージョン指定無しで3.2.5が入りました。状況再現のためバージョン指定のコマンドを記載。
$ yarn add leaflet [email protected]

[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "react@^17.0.1".
warning " > [email protected]" has incorrect peer dependency "react-dom@^17.0.1".
warning "react-leaflet > @react-leaflet/[email protected]" has incorrect peer dependency "react@^17.0.1".
warning "react-leaflet > @react-leaflet/[email protected]" has incorrect peer dependency "react-dom@^17.0.1".

# index.tsx

import type { NextPage } from 'next'
import { useMemo } from 'react'
import dynamic from 'next/dynamic'

const Home: NextPage = () => {
  const Map = useMemo(
    () =>
      dynamic(() => import('../components/map'), { // react-leafletはCSRでしか動かないためdynamicを使用する
        loading: () => <p>loading</p>,
        ssr: false
      }),
    []
  )
  return (
    <div style={{ height: '100%', width: '500px' }}>
      <Map></Map>
    </div>
  )
}

export default Home

# components/map.tsx

import { MapContainer, TileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'

function Map(): JSX.Element {
  return (
    <MapContainer
      center={[35.689527394778, 139.6894541598]} // 新宿中央公園を表示する
      zoom={15}
      scrollWheelZoom={false}
      style={{ width: "300px", height: "300px" }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://tile.openstreetmap.jp/{z}/{x}/{y}.png"
      />
    </MapContainer>
  )
}

export default Map

[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "react@^17.0.1".
warning " > [email protected]" has incorrect peer dependency "react-dom@^17.0.1".
warning "react-leaflet > @react-leaflet/[email protected]" has incorrect peer dependency "react@^17.0.1".
warning "react-leaflet > @react-leaflet/[email protected]" has incorrect peer dependency "react-dom@^17.0.1".

$ npx create-next-app sample-page2 --typescript --use-npm
$ npm install leaflet [email protected]

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from [email protected]
npm ERR! node_modules/react-leaflet
npm ERR!   react-leaflet@"3.2.5" from the root project
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.
npm ERR! 
npm ERR! See /Users/nyarome/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nyarome/.npm/_logs/2022-05-07T05_48_30_419Z-debug-0.log