Issues with NextJS 12.0.9

Trying to import VRCanvas in NextJS 12.0.9

How can this be fixed?

SyntaxError: Unexpected token 'export'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///C:/Users/USER/Wicka/test/node_modules/%20(webxr-input-profiles/motion-controllers/dist/motion-controllers.module.js (397)
wrapSafe
internal/modules/cjs/loader.js (984:16)
Module._compile
internal/modules/cjs/loader.js (1032:27)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1097:10)
Module.load
internal/modules/cjs/loader.js (933:32)
Function.Module._load
internal/modules/cjs/loader.js (774:14)
Module.require
internal/modules/cjs/loader.js (957:19)
require
internal/modules/cjs/helpers.js (88:18)
Object.<anonymous>
file:///C:/Users/USER/Wicka/test/node_modules/@react-three/xr/dist/index.cjs.js (10:25)
Module._compile
internal/modules/cjs/loader.js (1068:30)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1097:10)

import React, { useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { VRCanvas } from '@react-three/xr'

function Box(props) {
  // This reference gives us direct access to the THREE.Mesh object
  const ref = useRef()
  // Hold state for hovered and clicked events
  const [hovered, hover] = useState(false)
  const [clicked, click] = useState(false)
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame((state, delta) => (ref.current.rotation.x += 0.01))
  // Return the view, these are regular Threejs elements expressed in JSX
  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}


export default function Home() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
    </Canvas>
  )
}

[CodyJasonBennett]

Looks like one of react-xr’s dependencies incorrectly passes a module to its main field. I just created a PR to address that although I’m looking into wider issues across three.

[EliasTouil]

I was able to have a running example, I think it works, but i’m only getting “WEBXR NOT AVAILABLE”

using NextJs dynamic imports

// page 
import { NextPage } from 'next';
import dynamic from 'next/dynamic';
import React from 'react';

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

const ArViewPage: NextPage = () => {
  return <ArView />;
};

export default ArViewPage;

//Component to be rendered dynamically on the browser only
import { Text } from '@react-three/drei';
import { ARCanvas, DefaultXRControllers, Interactive } from '@react-three/xr';
import { useState } from 'react';

function DBox({ color, size, scale, children, ...rest }: any) {
  return (
    <mesh scale={scale} {...rest}>
      <boxBufferGeometry attach="geometry" args={size} />
      <meshPhongMaterial attach="material" color={color} />
      {children}
    </mesh>
  );
}

function Button(props: any) {
  const [hover, setHover] = useState(false);
  const [color, setColor] = useState<any>('blue');

  const onSelect = () => {
    setColor((Math.random() * 0xffffff) | 0);
  };

  return (
    <Interactive
      onHover={() => setHover(true)}
      onBlur={() => setHover(false)}
      onSelect={onSelect}
    >
      <DBox
        color={color}
        scale={hover ? [0.6, 0.6, 0.6] : [0.5, 0.5, 0.5]}
        size={[0.4, 0.1, 0.1]}
        {...props}
      >
        <Text
          position={[0, 0, 0.06]}
          fontSize={0.05}
          color="#000"
          anchorX="center"
          anchorY="middle"
        >
          Hello react-xr!
        </Text>
      </DBox>
    </Interactive>
  );
}

const ArViewPage: React.FC = () => {
  return (
    <ARCanvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Button position={[0, 0.1, -0.2]} />
      <DefaultXRControllers />
    </ARCanvas>
  );
};

export default ArViewPage;