NextJS Issue

[runabol]

I was able to successfully create a React component around this library:

import React, { useState, useEffect, useRef } from "react";
import * as GaussianSplats3D from "@mkkellogg/gaussian-splats-3d";

export default function GaussianSplat3({
  src,
  camera,
}: {
  src: string;
  camera?: Camera;
}) {
  const [rootElementId] = useState(
    `gaussian-splat-viewer-${Math.random().toString(36).substring(2)}`,
  );

  useEffect(() => {
    const rootElement = document.getElementById(rootElementId);
    if (!rootElement) return;
    const viewer = new GaussianSplats3D.Viewer({
      cameraUp: camera ? camera.up : [0, 1, 0],
      initialCameraPosition: camera ? camera.position : [0, 1, 0],
      initialCameraLookAt: camera ? camera.lookAt : [1, 0, 0],
      rootElement: rootElement,
      sharedMemoryForWorkers: false,
    });

    viewer
      .addSplatScene(src, {
        streamView: true,
        showLoadingUI: false,
        format: SceneFormat.Splat,
      })
      .then(() => {
        viewer.start();
        viewer.perspectiveControls.stopListenToKeyEvents();
        viewer.orthographicControls.stopListenToKeyEvents();
      });

    // Cleanup function to remove event listeners
    return () => {
      viewer
        .dispose()
        .then(() => {})
        .catch((err) => {
          console.log("error disposing of GS3 viewer:", err);
        });
    };
  }, []);

  return <div className="h-full w-full" id={rootElementId}></div>;
}

It generally works quite well. My only issue now is when running in NextJS in development mode with reactStrictMode=true (which is the recommended setting) I run into this error:

I tries wrapping it in a try catch block but this doesn't help either.

This doesn't happen when I run the NextJS app in production mode. i.e.:

npm run build && npm run start

or when I turn off reactStrictMode

Wondering if anyone else ran into this and if they found a way around it.