Svelte/Kit项目引入ECharts报Unexpected token 'export'错误求助

问题重现 #

在Svelte-Kit项目中执行import * as echarts from 'echarts/core';时，出现以下语法错误：

export * from './lib/export/core.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169: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:530:24)

已尝试的无效方案 #

• 修改svelte.config.js的预处理器逻辑，试图替换ECharts的导出语句，无效果
• 发现node_modules/echarts中的tsconfig.json设置target: "ES3"，但不知道如何修复

用户的svelte.config.js配置：

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(
        { scss: true },
        {
            async script({ content, attributes }) {
                if (attributes.src && attributes.src.includes('node_modules/echarts')) {
                    return {
                        code: content.replace('export default echarts;', 'export { echarts };')
                    };
                }
                return { code: content };
            }
        }
    ),

    kit: {}
};

export default config;

ECharts的tsconfig.json片段：

{
    "compilerOptions": {
        "target": "ES3",
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictBindCallApply": true,
        "removeComments": false,
        "sourceMap": true,
        "moduleResolution": "node",
        "declaration": true,
        "declarationMap": false,
        "importHelpers": true,
        "pretty": true,
        "outDir": "lib"
    },
    "include": [
        "src/**/*.ts",
        "extension-src/**/*.ts",
        "test/lib/myTransform/src/**/*.ts"
    ]
}

有效解决方案 #

1. 配置Vite正确处理ECharts模块 #

修改svelte.config.js，在Vite配置中指定ECharts的优化规则，避免SSR环境下的模块解析错误：

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess({ scss: true }),
    kit: {
        adapter: adapter(),
        vite: {
            optimizeDeps: {
                include: ['echarts']
            },
            ssr: {
                noExternal: ['echarts']
            }
        }
    }
};

export default config;

该配置让Vite在构建时将ECharts视为ESM模块处理，跳过CommonJS环境的解析逻辑。

2. 客户端按需导入ECharts #

ECharts依赖DOM环境，必须在客户端渲染时初始化。使用Svelte的onMount钩子确保仅在浏览器环境中加载：

<script>
    import { onMount, onDestroy } from 'svelte';
    let chartInstance;

    onMount(async () => {
        // 按需导入所需的ECharts模块
        const { init } = await import('echarts');
        const { LineChart } = await import('echarts/charts');
        const { TitleComponent, TooltipComponent } = await import('echarts/components');
        const { CanvasRenderer } = await import('echarts/renderers');

        // 注册模块
        const echarts = await import('echarts/core');
        echarts.use([
            LineChart,
            TitleComponent,
            TooltipComponent,
            CanvasRenderer
        ]);

        // 初始化图表
        const container = document.getElementById('chart-box');
        chartInstance = init(container);
        chartInstance.setOption({
            title: { text: '动态数据示例' },
            xAxis: { type: 'category', data: ['周一', '周二', '周三'] },
            yAxis: { type: 'value' },
            series: [{ type: 'line', data: [120, 200, 150] }]
        });
    });

    // 组件销毁时清理图表
    onDestroy(() => {
        chartInstance?.dispose();
    });
</script>

<div id="chart-box" style="width: 100%; height: 400px;"></div>

3. 确认package.json配置 #

确保你的package.json中已设置"type": "module"，这已经在你的配置中存在，无需修改。

无效方案的原因说明 #

• 预处理器替换逻辑无效：ECharts的核心模块使用export * from语法，而非export default echarts，所以替换语句无法匹配
• 修改依赖的tsconfig无意义：ECharts的编译产物已经是标准ESM格式，target: ES3只是编译时的语法兼容目标，不影响最终模块的加载方式

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