Watch example get error when click Enter AR button

[Mo-zoumo]

When I open the watch example(https://pmndrs.github.io/xr/examples/watch/) in the quest 2 default browser and click the "Enter AR" button, there's an error in the browser console.

Then I tried to copy the watch example code into my react three fiber project, and click the "Enter AR" button, there's an error in the browser console.

[bbohlender]

This example needs unbounded spaces enabled. For the second error, I need more context. Something seems misplaced.

[Mo-zoumo]

@bbohlender

Browser: Quest 2 Meta Quest Browser

I copied code from https://github.com/pmndrs/xr/blob/main/examples/watch/src/App.tsx

import { Canvas } from '@react-three/fiber'
import { IfInSessionMode, XR, createXRStore } from '@react-three/xr'
import { HandWithWatch, Watch } from './Hand.jsx'
import { OrbitControls } from '@react-three/drei'

const store = createXRStore({
  hand: {
    right: HandWithWatch,
    left: { model: { colorWrite: false, renderOrder: -1 }, grabPointer: false, rayPointer: false },
  },
  foveation: 0,
  bounded: false,
})

export default function App() {
  return (
    <>
      <button
        style={{
          position: 'absolute',
          zIndex: 10000,
          background: 'black',
          borderRadius: '0.5rem',
          border: 'none',
          fontWeight: 'bold',
          color: 'white',
          padding: '1rem 2rem',
          cursor: 'pointer',
          fontSize: '1.5rem',
          bottom: '1rem',
          left: '50%',
          boxShadow: '0px 0px 20px rgba(0,0,0,1)',
          transform: 'translate(-50%, 0)',
        }}
        onClick={() => store.enterAR()}
      >
        Enter AR
      </button>
      <Canvas shadows camera={{ position: [0, 0, 0.3], fov: 25 }}>
        <XR store={store}>
          <IfInSessionMode deny="immersive-ar">
            <OrbitControls />
            <group position={[0.02, 0, 0]} rotation={[Math.PI / 2 + 0.2, 0, Math.PI / 2, 'YZX']}>
              <Watch />
            </group>
          </IfInSessionMode>
          <ambientLight intensity={2} />
          <directionalLight intensity={2} position={[10, 10, 10]} />
        </XR>
      </Canvas>
    </>
  )
}

My package dependencies

"dependencies": {
    "@preact/signals-core": "^1.8.0",
    "@react-three/drei": "^9.115.0",
    "@react-three/fiber": "^8.17.10",
    "@react-three/uikit": "^0.6.4",
    "@react-three/uikit-lucide": "^0.6.4",
    "@react-three/xr": "^6.2.18",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "three": "^0.169.0"
  }

Click the "Enter AR" button, still the same error message

[bbohlender]

just removed bounded: false and this should be fine. Please reopen if the error persists after removing the bounded: false flag

Either your headset does not support unbounded spaces yet or you havent enabled the feature in the browsers flags.