yarn을 사용하여 패키지를 설치할 때 경고를 자세히 읽으면 불필요한 번거로움을 피할 수 있습니다~react-leaflet 힘들면~

개시하다

yarninstall/add 집행 중의 경고에 특별히 신경 쓰지 않았고, 이후 여분의 조사 경험이 있었기 때문에 반성의 뜻을 담은 글을 썼다.

next.js+react-leaflet을 사용할 때 어려움을 겪는 사례

이 이야기는 2022/4 상순에 발생했고 현재 관련 포장의 업데이트가 완료되어 상황이 다르다.
글의 지령군과 소스 코드는 글을 쓸 때 재현성을 가지도록 조정되었다.

차리다

어떤 웹 페이지 제작 사건에서 웹 페이지에 지도를 표시하는 필수 조건이 있기 때문에next.js(v12.1.4)+react-leaflet를 이용할 기회가 있습니다.
당시에 했던 일로 다음과 같은 지령next를 사용합니다.js에 react-leaflet을 추가하여 페이지에 지도를 삽입합니다.

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

yarn add를 집행할 때 사실 다음과 같은 Warning이 나타났지만 그때는 눈치채지 못하고 작업을 하고 있었다.

[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".

문제가 생기다

react-leaflet의 구성 요소를 페이지에 끼워 넣으면 다음과 같은 오류가 발생합니다.

그때의 코드는 다음과 같다.

# 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

오류가 "Map container is already initialized"로 나타나므로 Map 구성 요소가 두 번 이상 재현된 것처럼 보입니다.
나는 처음에는 왜 그렇게 변했는지 몰랐다.
또 yarn dev면 오류가 발생yarn build && yarn start하면 오류가 발생하지 않고 지도가 표시됩니다.
수수께끼가 점점 깊어지는데...

전에 했던 일들을 해결해 드릴게요.

맵 구성 요소에 console를 추가합니다.로그 삽입
=> console.로그를 두 번 실행했기 때문에 맵 구성 요소가 두 번 재현되었는지 확인하십시오.

dynamic의 쓰기가 좋지 않습니다. 여러 번 구성 요소를 보여 줍니까?
=>선인의 지혜, Stackoverflow 등도 조사해 봤지만, 이 작법은 옳은 것 같다.

Home 구성 요소도 콘솔을 시도합니다.로그 삽입
=>여기도 콘솔입니다.로그를 두 번 실행했습니다.그러니까,next.js 자체가 모든 구성 요소를 두 번 렌더링할 수 있습니까?추측하다.

next.js 기능으로 두 번 구성 요소를 재현한 이유를 조사하다
=>reactStrictMode 때문인 것 같아요.개발 모델에서만 효과적인 기능이기 때문에 공식 모델에서 오류가 발생하지 않는 현상과도 일치한다.

next.config.js의reactStrictMode를 가짜로 수정(해결 방법 1)
=>지도가 정확하게 표시되었습니다!

이 해결 방법이 안 좋은 것 같아. react-leaflet의github에 issue가 있는지 확인해 봐.
=> react18에 대응하는 issue를 원합니다. 검색

react-leaflet의 v4.0.0-beta.1의 존재를 알고 이곳을 사용해 보세요(해결 방법2)
=>StrictMode는 실제 상태에서도 지도를 올바르게 표시합니다.그중 v4의 정식 버전이 발표되었으니 해결되었습니다.

여러 가지 일을 할 때는 벌써 3시간가량 지났다.
결국 이런 느낌에 나타난다.

이후 눈여겨본 것들(본 기사에서 쓰고 싶은 것들)

Yarn으로 표시된 Warning으로 표시.

그 후 한 달가량 지난 어느 날, 다른 개발용 PC가 이 창고를 가동할 수 있도록 포장을 설치했는데, 문득 글 첫머리에 붙어 있는 야른의 워닝 표시가 보였다.

[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".

거기에 분명히 [email protected]에만 대응하는 오류가 발생했습니다.
초기 단계에서 이를 알아차리면 다음과 같은 절차를 통해 순조롭게 대응할 수 있어 많은 시간을 절약할 수 있다.warningを見る -> react18に対応したreact-leafletが無いかgithubを見にいく -> react-leaflet v4の存在を知る＆v3で起きている問題点を認識する -> next.jsに組み込む

yarn과 npm 패키지를 설치할 때의 행동이 다르다

이번엔 넥스트.js를 사용할 때yarn을 사용합니다.npm를 사용하면 다음과 같습니다.

$ 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

npm의 경우 포장 의존성이 일치하지 않으면 오류가 발생합니다.
간단명료하게 표현할 수 있다면 소홀히 하지 않겠지.

총결산

yarn을 사용하여 봉인을 설치할 때 경고가 표시되는지 자세히 관찰합니다

잠시 내버려둬도 괜찮은지 해결해야 하는지 판단하는 습관을 기르기

사용하고자 하는 라이브러리가 프레임워크의 새 버전에 맞는지 확인하기 전에
이번엔 넥스트야.js의 새로운 버전에 관한 것이지만 자주 있는 말이기 때문에 주의해야 한다

는 통상적으로 공식 issue

를 자세히 읽는 것으로 기재된다.

후기

만약 최초 단계에서 Warning을 보았다면 해결되기 전의 시간을 절약할 수 있었을 것이다. 대신next가 되었다.나는 js를 좀 더 배웠다.
나는 이것이 도서관을 선정할 때의 기본이라고 생각한다. (비록 하지는 않았지만) 사고방식의 참고가 되기를 바란다.