SvelteKit导入本地AOS npm模块提示无default导出如何解决

• aos官方仓库源码构建后的产物默认采用UMD/CommonJS混合格式，仅通过module.exports = AOS语法导出实例，没有做ES模块的export default兼容处理
• SvelteKit底层依赖Vite，对file:协议引入的本地依赖的CommonJS转ES模块逻辑，和从npm registry直接安装的依赖处理规则不同，不会自动把module.exports导出的内容映射为ES模块的default导出，因此导入时会抛出找不到default导出的报错，这也是你不修改aos源码直接本地引入也会报错的核心原因。

你可以任选以下任意一种方法修复：

方法1：调整导入语法（无需修改aos源码和项目配置，最快生效） #

把默认导入的写法改成以下任意一种即可：

// 写法1：导入整个模块后取default属性
import * as AOSModule from 'aos';
const AOS = AOSModule.default;

// 写法2：直接用CommonJS导入语法（仅适配客户端执行的代码）
const AOS = require('aos');

方法2：修改Vite配置强制预构建aos #

在SvelteKit项目的vite.config.js中添加如下配置，让Vite对aos执行预构建，自动完成CommonJS到ES模块的转换、映射default导出：

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

export default defineConfig({
  plugins: [sveltekit()],
  optimizeDeps: {
    include: ['aos']
  }
});

修改配置后重启开发服务即可生效。

方法3：修改aos构建配置输出兼容ES模块的产物 #

如果你希望修改后的aos包本身支持ES模块默认导入，可以调整aos的构建配置：

1. 找到aos项目根目录的构建配置文件（webpack.config.js或rollup配置文件）
2. 修改输出配置，新增libraryExport: 'default'规则，或新增ES模块格式的输出项
3. 重新构建aos后再引入到SvelteKit项目即可

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