SvelteKit中导入GeoJSON文件报错SyntaxError: Unexpected token ':'，如何解决？

你遇到的SyntaxError: Unexpected token ':'，是因为SvelteKit（底层基于Vite）默认会把导入的.geojson文件当作JavaScript模块解析，但GeoJSON本质是JSON格式，直接按JS模块解析就会触发语法错误。

解决方法有两种： #

方法一：通过?raw后缀获取原始文本后解析

直接在导入路径后添加?raw，拿到文件的原始字符串，再用JSON.parse转换成JSON对象：

<script>
    import geojsonRaw from '$lib/some_file.geojson?raw';
    const geojsonData = JSON.parse(geojsonRaw);
    console.log(geojsonData);
</script>

方法二：配置Vite识别GeoJSON为资源文件

在项目根目录的vite.config.js（或vite.config.ts）中添加assetsInclude配置，让Vite把.geojson文件当作JSON资源处理：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()],
    assetsInclude: ['**/*.geojson']
});

配置完成后，就可以直接正常导入GeoJSON文件：

<script>
    import geojsonData from '$lib/some_file.geojson';
    console.log(geojsonData);
</script>

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