目的

ReactにLeafletで地図を導入する

環境

react@17.0.2
leaflet@1.7.1

作業手順（インストールから表示まで）

公式ドキュメントに従い進める
https://react-leaflet.js.org/docs/start-setup/

インストール

npm install react react-dom leaflet
npm install react-leaflet

地図を画面上に表示する

App.js

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import { LatLng } from "leaflet";
import "leaflet/dist/leaflet.css";

import "./App.css";

function App() {
  const position = new LatLng(51.505, -0.09);

  return (
    <div className="App">
      <MapContainer center={position} zoom={13}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </div>
  );
}

export default App;

App.css

.App {
  text-align: center;
  height: 100vh;
}

.leaflet-container {
  width: 100vw;
  height: 100vh;
}

エラーメッセージ

以上まで設定できたところで npm start を行うと、次のエラーが発生する

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

原因

トランスパイラのターゲット設定にあるライブラリ内の不具合

React Leaflet + TypeScriptで地図（地理院タイル）を表示する
https://zenn.dev/tris/articles/2021-10-react-leaflet-ts-gsi#%E5%AE%9F%E8%A1%8C%E3%81%A8%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E8%A7%A3%E6%B6%88

対策手順

1. package.jsonを以下のように修正
browserslistを、production、developmentを、全部productionの内容だけにする

package.json修正前

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

package.json修正後

"browserslist": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]

1. キャッシュをクリア
node_modules/.cache 以下を削除し
npm install の上で、再度 npm startで起動する