时间戳

首页 > 解决方案 > 模块解析失败：使用这些加载器处理了意外的令牌文件：

reactjs - 模块解析失败：使用这些加载器处理了意外的令牌文件：

问题描述

我想使用反应将地图添加到我的网站

但是当我启动应用程序时，它说，

./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败：意外令牌 (10:41) s\Soufiane\Downloads\WORK\samsara_v1\samsara_v1\src\SearchPage' 文件已处理这些装载机：

  const options = props.pathOptions ?? {};

| element.instance.setStyle(options); | optionsRef.current = 选项；

import React from 'react';
import { render } from 'react-dom';
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import ClusterLayer from 'react-leaflet-cluster-layer';
 
const position = { lng: -122.673447, lat: 45.522558 };
const markers = [
  {
    position: { lng: -122.673447, lat: 45.5225581 },
    text: 'Voodoo Doughnut',
  },
  {
    position: { lng: -122.6781446, lat: 45.5225512 },
    text: 'Bailey\'s Taproom',
  },
  {
    position: { lng: -122.67535700000002, lat: 45.5192743 },
    text: 'Barista'
  }
];
 
class ExampleClusterComponent extends React.Component {
 
  render() {
    const style = {
      border: 'solid 2px darkgrey',
      borderRadius: '8px',
      backgroundColor: 'white',
      padding: '1em',
      textAlign: 'center'
    };
    const cluster = this.props.cluster;
 
    if (cluster.markers.length == 1) {
      return (
        <div style={style} >{cluster.markers[0].text}</div>
      );
    }
 
    return (
      <div style={style}>{cluster.markers.length} items</div>
    );
  }
 
}
 
const map = (
  <MapContainer center={position} zoom={13}>
    <ClusterLayer
      markers={markers}
      clusterComponent={ExampleClusterComponent} />
    <TileLayer
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    />
  </MapContainer>
);

export default map

标签： reactjsleaflet

解决方案

更新你的 package.json。尝试使用以下软件包的这些版本：

"react-leaflet": "2.7.0",
"react-leaflet-markercluster": "2.0.0",
"leaflet": "^1.6.0",
"leaflet.markercluster": "^1.5.0",

推荐阅读