react-xr Failed to enter VR mode in the latest version of react-three/xr and chrome

Hi, Im a newbie to react-three/xr.

When I tried to run the first official demo locally,

Chrome reported an error when I tried to click to enter VR mode.

I found that firefox can enter VR mode, but it can't simulate the controller operation.

I also tried it on pico, it worked.

So it looks like this is a chrome incompatibility issue with react-three/xr. Does anyone have any ideas?

Here is my code

package.json

{
  "name": "r3f-offical-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "@react-three/fiber": "^9.1.2",
    "@react-three/xr": "^6.6.13",
    "@vitejs/plugin-basic-ssl": "^2.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "three": "^0.175.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "vite": "^6.2.0"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [react(), basicSsl()],
})

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

App.jsx

import { Canvas } from '@react-three/fiber';
import { XR, createXRStore } from '@react-three/xr';
import { useState } from 'react';

const store = createXRStore();

export default function App() {
  const [red, setRed] = useState(false);
  return (
    <>
      <button onClick={() => store.enterVR()}>Enter VR</button>
      <Canvas>
        <XR store={store}>
          <mesh
            pointerEventsType={{ deny: 'grab' }}
            onClick={() => setRed(!red)}
            position={[0, 1, -1]}
          >
            <boxGeometry />
            <meshBasicMaterial color={red ? 'red' : 'blue'} />
          </mesh>
        </XR>
      </Canvas>
    </>
  );
}

Apr 09 '25 12:04 KairuiLiu

I downgrade three from 0.175.0 to 0.172.0. the simulator worked

but the action panel still not show like 👇🏻

Apr 09 '25 13:04 KairuiLiu

Hey @KairuiLiu sorry for the delay. Can you make a github repo to reproduce the error with the latest version for all libraries? Thanks in advance :)

Apr 28 '25 09:04 bbohlender

Hey @KairuiLiu sorry for the delay. Can you make a github repo to reproduce the error with the latest version for all libraries? Thanks in advance :)

hi, please refer to https://github.com/KairuiLiu/r3f-vr-issue

Apr 29 '25 03:04 KairuiLiu