WebpackError: ReferenceError: window is not defined

[petercampanelli]

Getting this error on build. WebpackError: ReferenceError: window is not defined Anyone else having the same issue?

[create-juicey-app]

I have fixed it by making it clientside only Next.js Example

// pages/index.js
import React from 'react';
import dynamic from 'next/dynamic';

const OBJModel = dynamic(
  () => import('react-3d-viewer').then((module) => module.OBJModel),
  { ssr: false }
);

const HomePage = () => {
  return (
    <div>
      {OBJModel && (
        <OBJModel
          src="/path/to/model.obj"
          width={500}
          height={500}
          position={{ x: 0, y: 0, z: 0 }}
        />
      )}
    </div>
  );
};

export default HomePage;

React Example

import React, { useRef, useEffect } from 'react';
import { OBJModel } from 'react-3d-viewer';

const ThreeJsComponent = () => {
  const mountRef = useRef(null);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      mountRef.current.appendChild(document.createElement('div'));
    }
  }, []);

  return (
    <div ref={mountRef}>
      {/* Render the OBJModel component */}
      <OBJModel
        src="/path/to/model.obj"
        width={500}
        height={500}
        position={{ x: 0, y: 0, z: 0 }}
      />
    </div>
  );
};

export default ThreeJsComponent;

[create-juicey-app]

we can now close the issue.