类型错误模块‘“react-leaflet”“没有导出的成员'useEventHandlers’

Question

我有nextjs app + typescript + react-leaflet

当我启动我的开发服务器npm run dev时，它没有错误，但是当我用npm run build开始构建时，它说。

Type error: Module '"react-leaflet"' has no exported member 'useEventHandlers'.

  1 | import { useMemo, useCallback, useState } from 'react'
> 2 | import { useMap, useMapEvent, useEventHandlers, MapContainer } from 'react-leaflet'
    |                               ^
  3 |
  4 | // Classes used by Leaflet to position controls
  5 | const POSITION_CLASSES = {
info  - Checking validity of types .

这是我的package.json文件。

{
  "name": "spot-nearby",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@types/leaflet": "^1.7.0",
    "@types/react-leaflet": "^2.8.1",
    "axios": "^0.21.1",
    "csv-parser": "^3.0.0",
    "leaflet": "^1.7.1",
    "leaflet-geosearch": "^3.3.2",
    "next": "10.2.3",
    "papaparse": "^5.3.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-leaflet": "^3.2.0",
    "react-leaflet-search": "^2.0.1",
    "react-loader-spinner": "^4.0.0",
    "react-papaparse": "^3.14.0",
    "react-search-field": "^1.2.1"
  },
  "devDependencies": {
    "@types/react": "17.0.8",
    "typescript": "4.3.2"
  }
}

我已经安装了@types/react-leaflet，但为什么会发生这种情况？

Answer 1

react-leaflet实际上是does not export的useEventHandlers方法。这是@react-leaflet/core包中的一个方法。它是一个react-leaflet包的dependency，必须随它一起安装。并且应该从那里导入：

import { useMap, useMapEvent, MapContainer } from 'react-leaflet'
import { useEventHandlers } from '@react-leaflet/core'