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

Question

I have nextjs app + typescript + react-leaflet

when I start my development server npm run dev it's fine there is no error, but when I start build with npm run build I have an error, it says.

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 .

Here's my package.json file.

{
  "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"
  }
}

I already install @types/react-leaflet, but why did this happened?

Answer 1

react-leaflet in fact does not export useEventHandlers method. It's a method from @react-leaflet/core package. It's a dependency of react-leaflet package and must be installed along with it. And should be imported from there:

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