SyntaxError: Unexpected token 'export'

[Mackral02]

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?

[Magiccamera]

I have/had the same problem, seemingly solved by the following actions:

1. npm install --save next-transpile-modules
2. add:
   const withTM = require('next-transpile-modules')(['@fancyapps/ui/']); to 2nd line of next.config.js
   Then add a new module.exports = withTM({}) like so:

module.exports = withTM{
reactStrictMode: true,
images: {
domains: []
}
},

It worked for me in dev and build with 2 warnings:

./pages/post/[slug].tsx
26:25 Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text

./components/Fancybox.tsx
13:8 Warning: React Hook useEffect has missing dependencies: 'delegate' and 'props.options'. Either include them or remove the dependency array. react-hooks/exhaustive-deps

First one is no brainer, I was too lazy to add alt-text, 2nd one is just another link the the chain to rectify which I haven't tried to figure out yet.

I'm no dev expert here, but do try to get clean output. Hope this helps.

[Magiccamera]

Found answer here: https://stackoverflow.com/questions/65936222/next-js-syntaxerror-unexpected-token-export and went to link the solution provider gave to find more clues that I didn't get at first: https://github.com/martpie/next-transpile-modules#readme

[Magiccamera]

This solution feels like duct tape though.

[fancyapps]

Sorry, but I do not know what to do here. package.json of this project has

  "main": "dist/fancybox.umd.js",
  "module": "dist/fancybox.esm.js",

but message SyntaxError: Unexpected token 'export' tells that something in your build is expecting (perhaps) Common JS module, but loads ES module. If you have any suggestions what to do here, I will be glad to hear.

[Magiccamera]

If you are using NextJS do this to your next.config.js:
/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')(['@fancyapps/ui/'])

module.exports = withTM({
reactStrictMode: true,
images: {
domains: []
}
})