错误：'Map‘没有从'react-leaflet’导出(导入为'LeafletMap')

Question

下面是我的代码：

import { Map as LeafletMap, TileLayer } from 'react-leaflet';

function Map() {
return (
    <div className="map">
        <LeafletMap>
            <TileLayer 
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution='&copy; <a href="http://osm.org/copyright"> OpenStreetMap </a> contributors'/>
        </LeafletMap>
    </div>

但我收到一个错误，说导入我已经尝试将‘Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap'). { Map’更改为'import { MapContainer‘，但仍然不起作用。相反，我收到了另一个错误：

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

我还尝试将react-leaflet版本从^3.2.1更改为^2.7.0，并将leaflet从^1.7.1更改为^1.6.0。但还是不走运。有什么解决方案吗？

Answer 1

您必须显式地转换react-leaflet，因为维护者不理解他们应该将转换目标更改为较低版本，以便更全面地支持空合并运算符：https://github.com/PaulLeCam/react-leaflet/issues/877#issuecomment-841871904

您可以尝试将其添加到您的babel配置

{
  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

然后确保您在构建过程中转换了node_modules/react-leaflet。如果您已经在使用@babel/preset-env，那么您只需要确保在构建过程中转换react-leaflet。如果你使用的是webpack，你可以这样做

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: filename => {
        return /node_modules/.test(filename) && !/react-leaflet/.test(filename)
      },
      use: ['babel-loader']
    }
  ]
}