ReferenceError while using model-viewer in NextJS

[SohamGhugare]

Description

I'm building a NextJS application, but when I try implementing model-viewer, I'm getting the following error

node_modules/@google/model-viewer/lib/constants.js (22:35) @ self
 ⨯ ReferenceError: self is not defined
    at __webpack_require__ (/Users/soham/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/soham/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/soham/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/soham/.next/server/webpack-runtime.js:33:42)
    at eval (./app/components/Model.js:7:78)
    at (rsc)/./app/components/Model.js (/Users/soham/.next/server/_rsc_app_components_Model_js.js:20:1)
    at Function.__webpack_require__ (/Users/soham/.next/server/webpack-runtime.js:33:42)
null

Following is my model-viewer code

// Model.js
import "@google/model-viewer";

const Model = () => (
  <div id="card">
    <model-viewer
      src="/chair.glb"
      poster="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b%2Fposter-astronaut.png?v=1599079951717"
      alt="A 3D model of a chair"

    ></model-viewer>
  </div>
);

export default Model;

PS: Yes, I'm using dynamic import with ssr false

// page.js
import dynamic from "next/dynamic";

const Model = dynamic(
  () => import("./components/Model"),
  {ssr: false}
) ;

export default function Home() {
  return (
    <Model />
  )
}

Live Demo

https://glitch.com/edit/#!/sturdy-pepper-hyena

Version

• model-viewer: v3.3.0

Browser Affected

• [x] Chrome
• [x] Firefox
• [x] Safari

OS

• [x] MacOS Sonoma v14.0

[elalish]

This looks like a NextJS issue - have you asked on their forums?