如何修改JS构建流程修复Svelte项目的模块导入语法错误

复现步骤 #

• 执行 npm create svelte@latest my-app 初始化项目
• 进入项目目录：cd my-app
• 安装基础依赖：npm install
• 安装Apple登录插件：npm i @capacitor-community/apple-sign-in
• 在src/routes/Header.svelte中添加该库的调用代码
• 执行构建命令 npm run build，触发错误

错误详情 #

SyntaxError: Cannot use import statement outside a module

该插件在create-react-app项目中可正常运行，推测是Svelte项目默认Vite构建流程的模块处理逻辑导致此问题。

方案1：修改Vite SSR配置（推荐） #

由于Capacitor插件仅适用于客户端环境，且该库采用ES模块编写，在SSR构建阶段Node环境无法正确解析，需将其排除在SSR外部：

在项目根目录的vite.config.js（或vite.config.ts）中添加如下配置：

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

export default defineConfig({
	plugins: [sveltekit()],
	ssr: {
		noExternal: ['@capacitor-community/apple-sign-in']
	},
	optimizeDeps: {
		include: ['@capacitor-community/apple-sign-in']
	}
});

方案2：使用Babel转换模块 #

若方案1无效，可通过Babel将插件代码转换为Node兼容的CommonJS格式：

1. 安装依赖：

npm install @babel/core @babel/preset-env vite-plugin-babel --save-dev

2. 修改vite.config.js：

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

export default defineConfig({
	plugins: [
		sveltekit(),
		babel({
			babelrc: false,
			presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
			include: ['node_modules/@capacitor-community/apple-sign-in/**/*']
		})
	]
});

方案3：确保仅在客户端加载插件 #

在Svelte组件中，通过判断浏览器环境延迟加载插件，避免SSR阶段执行模块导入：

<script>
	let appleSignIn;

	if (typeof window !== 'undefined') {
		import('@capacitor-community/apple-sign-in').then(module => {
			appleSignIn = module.AppleSignIn;
		});
	}

	async function handleSignIn() {
		if (appleSignIn) {
			const result = await appleSignIn.signIn();
			// 处理登录结果
		}
	}
</script>

<button on:click={handleSignIn}>Apple 登录</button>

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