1

I'm using NextJs and below is my package file details

"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"
  }

This runs well when I run npm run dev but when I try to build the code it give error. Also the Vercel deployment gives error in build time as below

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

Can someone please help me find a way out of this?

Mackral
  • 21
  • 3

2 Answers2

2

Install https://www.npmjs.com/package/next-transpile-modules this package and try loading inside your next-config.js

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

const nextConfig = {
     ...yourConfig
};

module.exports = withTM(nextConfig);
MarkoMatijevic
  • 21
  • 3
2

For anyone using this package with nextjs and facing this issue, just replace the esm with umd and it works perfectly without any issue.

The react wrapper snippet for fancybox looks like this:

import React, { useEffect } from "react";

import { Fancybox as NativeFancybox } from "@fancyapps/ui/dist/fancybox.umd";
import "@fancyapps/ui/dist/fancybox.css";

function Fancybox(props) {
  const delegate = props.delegate || "[data-fancybox]";

  useEffect(() => {
    const opts = props.options || {};

    NativeFancybox.bind(delegate, opts);

    return () => {
      NativeFancybox.destroy();
    };
  }, []);

  return <>{props.children}</>;
}

export default Fancybox;
Suraj Khanal
  • 498
  • 8
  • 26