0

I had this error,

Attempted import error: 'LeafletProvider' is not exported from 'react-leaflet'.

when I tried to import LeafletProvider to one of my component file as follows:

import { withLeaflet, MapControl, LeafletProvider } from "react-leaflet";

I believe I have installed the latest version of react-leaflet (v.3.2.2) and have read the documentation as much as I could but I didn't see LeafletProvider in it.

Hope someone could help me fathom what to do with this. Basically, I just want to be able to change between two or more leaflet map tilelayers.

Semb
  • 156
  • 2
  • 20

2 Answers2

1

It seems the Provider has to be imported as such:

import { LeafletContext } from '@react-leaflet/core';

and used as :

<LeafletContext.Provider>

according to this page of the documentation:

https://react-leaflet.js.org/docs/core-api/#leafletprovider

Ivo
  • 2,308
  • 1
  • 13
  • 28
  • Thanks for the quick reply @Ivo. Anyways, I still got this error: `Attempted import error: 'LeafletContext' is not exported from 'react-leaflet'.` – Semb Oct 20 '21 at 06:33
  • 1
    I think this worked tho: `import { LeafletContext } from "@react-leaflet/core";` – Semb Oct 20 '21 at 06:38
0

Following the documentation in @Ivo's answer, here's what I did:

First install:

npm install @react-leaflet/core

Then import it like this:

import { LeafletContext } from "@react-leaflet/core"

And then use as:

<LeafletContext.Provider>
    // enter code here
</LeafletContext.Provider>
Semb
  • 156
  • 2
  • 20