react-leaflet-markercluster 导出未定义

Question

未捕获的引用错误：未定义导出 webpack://project/./node_modules/react-leaflet-markercluster/dist/cjs/index.js?:5 js http://localhost/js/bundle.js:1885

import React from 'react';
import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-markercluster'
import 'leaflet/dist/leaflet.css'
import 'react-leaflet-markercluster/styles'

const AppTest = () => {
  return (
    <div className="container">
      <MapContainer className="map-container" center={[49.8397, 24.0297]} zoom={6}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />        
        <MarkerClusterGroup>
          <Marker position={[49.8397, 24.0297]} />
          <Marker position={[52.2297, 21.0122]} />
          <Marker position={[51.5074, -0.0901]} />
        </MarkerClusterGroup>
      </MapContainer>
    </div>
  )
}

export default AppTest

---

使用 TypeScript 和 webpack 以及：

• 反应19
• react-leaflet-markercluster (5.0.0-rc.0) （我尝试了之前的 版本也）

在我根据这个答案使用不同的集群之前

Answer 1

原因：

这是由于使用了错误版本的react-leaflet-markercluster 文件造成的。 在发生错误的文件路径中，可以看到写着cjs。 由于您在您提供的 exmaple 代码中使用 import，因此它需要使用 ejs 版本，该版本确实存在于 node_modules react-leaflet-markercluster 文件夹中。

所以问题很可能出在你的 webpack 配置中。

解决此问题的一种方法是将“type”：“module”添加到您的package.json中。

另一个可能是以不同的方式配置 webpack：

resolve: {
 mainFields: ['module', 'main'],
  extensions: ['.js', '.jsx', '.ts', '.tsx'], 
},

创建自定义脚本：

另一方面，我在这两个方面都遇到了麻烦，所以我决定通过使用我自己的脚本手动修补它来手动更改node_module的package.json文件：

修复-react-leaflet-markercluster.js

const fs = require('fs');
const path = require('path');

const packagePath = path.resolve(__dirname, '../node_modules/react-leaflet-markercluster/package.json');
const packageJson = require(packagePath);

packageJson.main = './dist/esm/index.js';
packageJson.exports['.'] = './dist/esm/index.js';

fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2));
console.log('Fixed react-leaflet-markercluster package.json');

然后将其添加到您的 package.json 脚本中：

“postinstall”：“节点修复-react-leaflet-markercluster.js”