Map component: Cannot read property 'initialize' of undefined

Question

I'm trying to get a basic map working using react-leaflet.js. Here's my code:

import React from 'react';
import { Map } from 'leaflet';

const mapStyle = {
  height: '400px'
};

const mapCenter = [0, -0];
const zoomLevel = 3;

export default class MapT extends React.PureComponent {
  render() {
    return (
      <div>
        <Map
          style={mapStyle}
          center={mapCenter}
          zoom={zoomLevel}
        >
        </Map>
      </div>
    );
  }
}

But I'm getting an error:

Uncaught TypeError: Cannot read property 'initialize' of undefined
    at NewClass (leaflet-src.js:300)
    at mountIndeterminateComponent (react-dom.development.js:14003)
    at beginWork (react-dom.development.js:14470)
    at performUnitOfWork (react-dom.development.js:17014)
    at workLoop (react-dom.development.js:17054)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:16366)
    at renderRoot (react-dom.development.js:17148)
    at performWorkOnRoot (react-dom.development.js:17993)
    at performWork (react-dom.development.js:17901)
    at performSyncWork (react-dom.development.js:17873)
    at requestWork (react-dom.development.js:17761)
    at scheduleWork (react-dom.development.js:17566)
    at Object.enqueueSetState (react-dom.development.js:11695)

What am I doing wrong?

Answer 1

You need to import the React leaflet components from react-leaflet instead of leaflet.

import { Map } from 'react-leaflet';