React/Next.js - SyntaxError: Unexpected token 'export'

[moayadcodes]

I keep getting an error when I try to use Fancybox with React/Next.js.

My Fancybox component is just a copy and paste from the component in the docs, so I'm not sure where things are going wrong. And following is how I'm using that component in my code:

<Fancybox>
  <div>
    {projects.map((project) => (
      <button key={project.id} type="button" data-src={project.src} data-fancybox="projects">
        <figure>
          <div>
            <Image src={project.thumb} alt="" layout="fill" />
          </div>
          <figcaption>{project.desc}</figcaption>
        </figure>
      </button>
    ))}
  </div>
</Fancybox>

Below is the full error message.

Server Error
SyntaxError: Unexpected token 'export'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
/home/moayad/projects/website-demik/node_modules/ (fancyapps/ui/dist/fancybox.esm.js (2)
Object.compileFunction
node:vm (352:18)
wrapSafe
node:internal/modules/cjs/loader (1033:15)
Module._compile
node:internal/modules/cjs/loader (1069:27)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1159:10)
Module.load
node:internal/modules/cjs/loader (981:32)
Function.Module._load
node:internal/modules/cjs/loader (822:12)
Module.require
node:internal/modules/cjs/loader (1005:19)
require
node:internal/modules/cjs/helpers (102:18)
Object.@fancyapps/ui/dist/fancybox.esm
file:///home/moayad/projects/website-demik/.next/server/pages/index.js (425:18)
__webpack_require__
file:///home/moayad/projects/website-demik/.next/server/webpack-runtime.js (33:42)

I'm using Fancyapps version 4.0.31 and Next.js version 12.2.4