Model viewer now working in Server Side Rendering

[RRonier]

Hello community,
I'm trying to use model viewer in a NextJs project, but when I try to run my webapp it throws me an error:
ReferenceError: window is not defined
at ....\node_modules@google\model-viewer\dist\model-viewer-umd.js
How can I fix this? Is an error I can fix or is a bug?
Thank you very much

[RRonier]

@timmmeh @elalish

[elalish]

model-viewer is a web component, and as such is very dependent on the DOM, which is not present in Node.js. You'll need to use Puppeteer or something similar to get headless Chrome running where model-viewer can operate. We automate our fidelity tests this way; you might want to look at our render-fidelity-tools package.

[Yuripetusko]

Simply import a component with model viewer using nextjs dynamic import with ssr: false option

[Poem7200]

how to add ssr:false option, could you give an example? I also come up with the same problem, but the demo below can not solve it…
https://codesandbox.io/s/github/ajmhyd/google-model-viewer-nextjs?file=/components/Model.js:140-238

[Yuripetusko]

We use nextjs

const ComponentWithModelViewer = dynamic(
  () => import('components/componentWithModelViewer'),
  {
    ssr: false,
  },
);

[Poem7200]

Thanks, finally I use another way to import this dependency, just add useEffect hook to import @google/model-viewer after mount

useEffect(() => { import('@google/model-viewer').catch(console.error); }, []);

[tomcatmew]

Can confirm @Poem7200 's solution works.
Life savier ! Thanks !

[guvargas]

This also work for older versions of next, with the error being something like

⨯ node_modules\@google\model-viewer\lib\constants.js (18:36) @ navigator
⨯ ReferenceError: navigator is not defined