导入 react-leaflet 与 webpack 反应会返回错误

Question

我试图简单地导入 react-leaflet 而不在我的项目中渲染任何地图，但它给了我这个错误。

TypeError: Object(...) is not a function

我确定它来自导入语句。 它甚至在第 2 行的错误中指出了它。这是我的代码。

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

export default class MyMap extends React.Component {
  constructor() {
    super()
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    }
  }

  render() {
    return (
        <div><h1>E</h1></div>
    );
  }
}

没有 import 语句，代码工作正常。 我在这里做错了什么？

Answer 1

查看 react-leaflet 网站 ( https://react-leaflet.js.org/ )，看起来 Map 组件是一个命名导出。 导入命名导出时，您需要用花括号包裹您要导入的组件：

import { Map } from 'react-leaflet';

这里有一些关于命名和默认导出的信息

我自己没有使用过 react-leaflet，但查看他们的网站似乎他们有一些很好的例子可以帮助您入门。 如果您不熟悉它，可能值得一看。