Vite.js+React中导入GeoJSON文件出现语法错误求助

排查方向与解决方案 #

1. 校验GeoJSON文件格式 #

报错Unexpected token ':'大概率是文件本身的JSON语法不合法。比如：

• 属性名未用双引号包裹（JSON要求必须是"key": value，不能是key: value）
• 存在多余的逗号、未闭合的引号或括号
• 文件内容为空或被损坏

用GeoJSON校验工具检查并修复文件结构，确保完全符合JSON规范。

2. 更换导入方式 #

React静态导入JSON/GeoJSON文件时，部分打包环境可能存在解析问题，改用异步加载更可靠：

import { useState, useEffect } from "react";
import "./App.css";
import Map, { Source, Layer } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { dataLayer } from "./assets/map_style";

function App() {
  const [year, setYear] = useState(2010);
  const [geoData, setGeoData] = useState(null);
  const token = "***";

  useEffect(() => {
    // 异步加载GeoJSON文件
    fetch("/assets/gemeinden_simplify200.geojson")
      .then(res => res.json())
      .then(data => setGeoData(data))
      .catch(err => console.error("加载失败:", err));
  }, []);

  // 加载完成前显示占位内容
  if (!geoData) return <div>加载中...</div>;

  return (
    <div className="app">
      <Map
        mapboxAccessToken={token}
        initialViewState={{
          latitude: 40,
          longitude: -100,
          zoom: 3,
        }}
        style={{ width: 600, height: 400 }}
        mapStyle="mapbox://styles/mapbox/streets-v9"
      >
        <Source type="geojson" data={geoData}>
          <Layer {...dataLayer} />
        </Source>
      </Map>
    </div>
  );
}

export default App;

3. 静态导入替代方案 #

如果偏好静态导入，可将GeoJSON内容封装为JS模块：

1. 在assets目录下创建gemeinden_simplify200.js文件，内容如下：

export default {
  // 粘贴你的GeoJSON完整内容，确保格式合法
  "type": "FeatureCollection",
  "features": [/* ... */]
};

2. 在App.js中导入该模块：

import GeoData from "./assets/gemeinden_simplify200.js";

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