SyntaxError：在运行时使用 fancyapps/ui 和 nextjs 时出现意外的令牌“导出”

Question

我正在使用 NextJs，下面是我的包文件详细信息

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fancyapps/ui": "^4.0.27",
    "daisyui": "^2.14.3",
    "gsap": "^3.10.4",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-icons": "^4.3.1",
    "swiper": "^8.1.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24"
  }

当我运行npm run dev 时它运行良好，但是当我尝试构建代码时它会出错。 此外，Vercel 部署会在构建时间中产生错误，如下所示

SyntaxError: Unexpected token 'export'
 at Object.compileFunction (node:vm:352:18)
 at wrapSafe (node:internal/modules/cjs/loader:1032:15)
 at Module._compile (node:internal/modules/cjs/loader:1067:27)
 at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
 at Module.load (node:internal/modules/cjs/loader:981:32)
 at Function.Module._load (node:internal/modules/cjs/loader:822:12)
 at Module.require (node:internal/modules/cjs/loader:1005:19)
 at require (node:internal/modules/cjs/helpers:102:18)
 at Object.6833 (/vercel/path0/.next/server/pages/gallery.js:63:41)
 at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:42) {
 type: 'SyntaxError'
 }
 Error: Command "npm run build" exited with 1

有人可以帮我找到解决办法吗？

Answer 1

安装 https://www.npmjs.com/package/next-transpile-modules 这个包并尝试在你的 next-config.js 中加载

const withTM = require('next-transpile-modules')(['@fancyapps/ui']);

const nextConfig = {
     ...yourConfig
};

module.exports = withTM(nextConfig);