在Svelte项目中使用vis.js时遭遇Unexpected token 'export'错误求助

在创建展示网络图的Svelte应用时，使用vis.js的vis-data和vis-network包时出现解析错误，在Next.js应用中测试也无法正常运行。报错信息如下：

Unexpected token 'export'
/home/walenty/Code/diagram/my-app/node_modules/vis-data/peer/index.js:1
export * from "./esm";
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)

相关代码：
+page.svelte

<svelte:head>
    <title>About</title>
    <meta name="description" content="About this app" />
</svelte:head>

<script>
    
import { DataSet } from "vis-data/peer";
import { Network } from "vis-network/peer";
import "vis-network/styles/vis-network.css";
</script>

<div class="text-column">

</div>

+page.ts

import { dev } from '$app/environment';

// we don't need any JS on this page, though we'll load
// it in dev so that we get hot module replacement
export const csr = dev;

// since there's no dynamic data here, we can prerender
// it so that it gets served as a static asset in production
export const prerender = false;

已确认node_modules中的vis包使用ESM导出，但不清楚为何触发该错误。

1. 配置SvelteKit转译第三方ESM包 #

SvelteKit的SSR环境默认会尝试用CommonJS加载第三方包，而vis.js的peer版本是纯ESM，需要配置让SvelteKit直接处理这些包：

修改svelte.config.js：

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter(),
		ssr: {
			noExternal: ['vis-data', 'vis-network']
		}
	}
};

export default config;

或者在vite.config.js中添加优化配置：

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

export default defineConfig({
	plugins: [sveltekit()],
	optimizeDeps: {
		include: ['vis-data', 'vis-network']
	}
});

2. 替换导入路径为标准版本 #

你当前使用的是vis-data/peer和vis-network/peer（peer依赖版本），尝试换成标准导入路径，避免peer依赖带来的加载问题：

修改+page.svelte中的导入：

import { DataSet } from "vis-data";
import { Network } from "vis-network";
import "vis-network/styles/vis-network.css";

3. Next.js环境的适配方案 #

如果在Next.js中测试，需要配置next.config.js让Next.js转译这些ESM包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['vis-data', 'vis-network'],
};

module.exports = nextConfig;

4. 重新安装依赖 #

清理现有依赖后重新安装，确保依赖版本匹配：

rm -rf node_modules package-lock.json
npm install

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