在react上使用gsap滚动触发器时不能在模块外部使用导入语句

Question

我正在尝试安装 gsap 库并在我的带有 astro 框架的 React 项目中使用它。按照严格执行的所有步骤，我完成了此安装：

import { useEffect, useRef } from "react";
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

但是当我启动开发环境时，我收到了屏幕截图中附加的错误。

Cannot use import statement outside a module
Stack Trace
/Applications/MAMP/htdocs/Developer/Git/bitozzi-scale/node_modules/gsap/ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

错误似乎在node_modules内，所以我无法弄清楚它为什么会中断。有人可以帮我吗？ :)

我正在尝试让动画在 gsap scrool 上工作

Answer 1

使用此错误将得到解决。 这个错误是由于没有使用ES模块造成的，所以你必须使用UMD模块 从 'gsap/dist/ScrollTrigger' 导入 { ScrollTrigger };