NextJS导入动画插件触发Unexpected token 'export'错误怎么解决

这个报错的核心是luge插件仅发布了ES Module版本，而Next.js服务端渲染阶段默认在Node.js环境执行代码，Node.js默认无法直接识别node_modules下第三方包的ES Module export语法。同时luge强依赖浏览器DOM API，本身不支持在服务端环境运行。

• 方案1：使用动态导入禁用服务端渲染（最简便，推荐）
  直接避免在服务端加载luge相关代码，仅在客户端环境导入执行，示例代码如下：

// 页面组件顶部直接导入样式，CSS不受SSR影响
import '@waaark/luge/dist/css/luge.min.css'
import { useEffect } from 'react'

export default function Home() {
  useEffect(() => {
    // 仅在客户端环境动态导入luge
    const initLuge = async () => {
      const luge = (await import('@waaark/luge')).default
      luge.init()
    }
    initLuge()
  }, [])

  // 你的页面内容
  return <div></div>
}

如果是组件形式引入，也可以用next/dynamic配置ssr: false包裹相关组件。

• 方案2：配置next.config.js转译luge包
  如果需要提前导入luge相关API，可以在Next.js配置中添加transpilePackages配置，让编译工具转译luge的ES Module语法适配Node环境：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 将luge加入转译列表
  transpilePackages: ['@waaark/luge']
}

module.exports = nextConfig

配置完成后重启项目，就可以正常在顶部导入luge，注意初始化逻辑依然要放在useEffect中，避免服务端调用浏览器API报错。

• 方案3：自定义Babel配置兜底
  如果使用的是旧版本Next.js不支持transpilePackages属性，可以自定义.babelrc文件，配置babel转译luge包：

{
  "presets": ["next/babel"],
  "overrides": [
    {
      "include": ["./node_modules/@waaark/luge"],
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  ]
}

需要先安装@babel/plugin-transform-modules-commonjs作为开发依赖。

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