Does this work with `nextjs`?

[kelokchan]

I have followed the example here but I'm constantly getting the following error.

Here is my code for reference

components/AR.tsx:

import React from 'react';
import { Camera, GLTFModel, Plane, Assets, Item } from 'aframe-react-component';
import { MindAR } from 'mind-ar-react';
import { ImageTracking } from 'mind-ar-react/dist/provider';

const rotationSettings = {
  enabled: true,
  rotationFactor: 5,
};

const scaleSettings = {
  enabled: true,
  minScale: 0.3,
  maxScale: 8,
};

const ImageTrackingPage = () => {
  return (
    <ImageTracking>
      <div
        style={{
          zIndex: 1,
          position: 'relative',
          width: '100%',
          overflow: 'hidden',
        }}>
        <MindAR.Scene
          mindARImage={{
            imageTargetSrc:
              'https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/examples/image-tracking/assets/card-example/card.mind',
            autoStart: true,
          }}
          color-space="sRGB"
          mouse-detector
          gesture-detector
          embedded
          renderer="colorManagement: true, physicallyCorrectLights"
          orientationUI
          stats>
          <Assets>
            <img
              id="card"
              src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.png"
              alt=""
            />
            <Item
              id="avatarModel"
              src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/softmind/scene.gltf"
            />
          </Assets>
          <Camera position={{ x: 0, y: 0, z: 0 }} look-controls={false} />
          <MindAR.Marker targetIndex={0}>
            <MindAR.Entity
              mouse-rotation={rotationSettings}
              mouse-scale={scaleSettings}
              gesture-rotation={rotationSettings}
              gesture-scale={scaleSettings}>
              <Plane
                src="#card"
                position={[0, 0, 0]}
                height={0.552}
                width={1}
                rotation={[0, 0, 0]}
              />
              <GLTFModel
                rotation={[0, 0, 0]}
                position={[0, 0, 0.1]}
                scale={[0.005, 0.005, 0.005]}
                animation={{
                  property: 'position',
                  to: '0 0.1 0.1',
                  dur: 1000,
                  easing: 'easeInOutQuad',
                  loop: true,
                  dir: 'alternate',
                }}
                src="#avatarModel"
              />
            </MindAR.Entity>
          </MindAR.Marker>
        </MindAR.Scene>
      </div>
    </ImageTracking>
  );
};

export default ImageTrackingPage;

pages/index.tsx:

import dynamic from 'next/dynamic';
import styles from '../styles/Home.module.css';

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

export default function Home() {
  return (
    <div className={styles.container}>
      <AR />
      <video></video>
    </div>
  );
}

I also made sure to only render this page on the client side but that didn't help

[krsbx]

@kelokchan sorry for the slow response, dont have time to update the repo lately

I think you can add the use client thing in your AR.tsx component and probably this issue happen because of the rehydration that run in the next js

I suggest you to make some sort of hook first so you can know that the rehydration is completed or not, if its completed then you can show the AR component