Vite项目导入gsap的ScrollSmoother提示无法解析导入报错

云上老周

2026-8-29

问题根因

ScrollSmoother是GSAP的付费俱乐部专属插件，并没有包含在通过npm安装的免费版gsap包中，因此直接从gsap/ScrollSmoother路径导入时，构建工具找不到对应文件，就会抛出模块解析失败的错误。

解决方案

根据是否持有插件授权选择对应处理方式：

已购买GSAP Club会员、持有ScrollSmoother合法使用授权
1. 将官方提供的会员专属插件包放到项目本地目录，例如src/vendor/gsap/
2. 修改导入路径，指向本地存放的ScrollSmoother文件，不要直接引用npm包内的不存在路径，修正后的代码参考：

import gsap from "gsap"
import ScrollTrigger from 'gsap/ScrollTrigger';
// 替换为本地存放ScrollSmoother的实际路径
import ScrollSmoother  from "@/vendor/gsap/ScrollSmoother";

gsap.registerPlugin(ScrollTrigger, ScrollSmoother)

const Navbar = () => {
  return (
    <div>Hello world</div>
  )
}

export default Navbar

可以在Vite配置中添加路径别名简化导入写法，修改vite.config.js：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@gsap-premium': path.resolve(__dirname, './src/vendor/gsap/')
    }
  }
})

配置完成后就可以直接用import ScrollSmoother from '@gsap-premium/ScrollSmoother'完成导入。