使用animejs的Next.js页面刷新时出现SyntaxError错误求助

问题原因 #

刷新页面时Next.js触发服务器端渲染（SSR），你直接导入的anime.es.js是纯ES模块，Node.js环境无法正确解析其导出语法，导致出现SyntaxError: Unexpected token 'export'错误。而开发时热更新仅在客户端执行，因此保存时运行正常。

解决方案 #

方案一：改用CommonJS版本导入 #

将导入语句替换为CommonJS格式的animejs文件，Node.js环境可直接解析：

import anime from "animejs/lib/anime.js";

之后原有动画代码无需修改，刷新页面即可正常运行。

方案二：动态导入+客户端执行 #

通过Next.js的动态导入指定ssr: false，确保animejs仅在浏览器端加载执行，避免SSR环境冲突：

import dynamic from 'next/dynamic';
import { useEffect } from 'react';

// 动态导入animejs，禁用SSR
const getAnime = dynamic(() => import('animejs').then(mod => mod.default), { ssr: false });

export default function YourComponent() {
  useEffect(() => {
    const anime = getAnime();
    
    const GLOBAL_CFG = { loop: true };

    const GEAR1 = anime({
      loop: true,
      targets: "#gear1 path",
      rotate: 360,
      easing: "linear",
    });

    const GEAR2 = anime({
      ...GLOBAL_CFG,
      targets: "#gear2 path",
      rotate: -360,
      easing: "linear",
    });

    // 组件卸载时停止动画，避免内存泄漏
    return () => {
      GEAR1.pause();
      GEAR2.pause();
    };
  }, []);

  return (
    <div>
      {/* 你的SVG元素 */}
      <svg id="gear1"><path d="你的路径"/></svg>
      <svg id="gear2"><path d="你的路径"/></svg>
    </div>
  );
}

方案三：让Next.js转译animejs #

在项目根目录创建或修改next.config.js，添加transpilePackages配置，让Next.js转译animejs代码以适配SSR环境：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['animejs'],
}

module.exports = nextConfig;

之后直接导入animejs即可：

import anime from "animejs";

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