Vite创建的React项目中Mapbox无法显示的问题求助

问题排查与解决方案 #

1. 修复依赖解析错误（错误2）

react-map-gl v7+版本将mapbox-gl设为可选依赖，Vite环境下容易出现解析失败问题，建议锁定兼容版本安装：

npm install react-map-gl@7.1.7 mapbox-gl@2.15.0

2. 解决CSS加载路径错误（错误1）

react-map-gl不会自动导入mapbox-gl的样式文件，需手动在组件顶部引入本地CSS：

import 'mapbox-gl/dist/mapbox-gl.css';

这能替代错误的远程CSS请求，避免路径占位符未替换导致的404问题。

3. 完善地图组件配置

地图正常显示必须配置Mapbox访问令牌，同时添加视图状态更新逻辑：

import { useState } from "react";
import ReactMapGL from "react-map-gl";
import 'mapbox-gl/dist/mapbox-gl.css'; // 新增：导入样式

export default function OurCampusesMap() {
  const [viewport, setViewport] = useState({
    latitude: -33.865143,
    longitude: 151.2099,
    width: "100vw",
    height: "100vh",
    zoom: 10,
  });

  return (
    <div>
      <ReactMapGL
        {...viewport}
        mapboxAccessToken="你的Mapbox令牌" // 替换为自己的令牌
        onViewportChange={setViewport} // 处理地图交互后的视图更新
      />
    </div>
  );
}

注：Mapbox令牌需自行注册获取，onViewportChange是地图交互（缩放、拖拽）的必要配置。

4. 重置依赖（可选）

若上述操作无效，删除依赖文件后重新安装：

rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者henry