When I use Next.js to build demo code

[xQuotes]

/node_modules/three/examples/jsm/webxr/XRControllerModelFactory.js:1
import {
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:872:18)
    at Module._compile (/Users/rich/.config/yarn/global/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Object.newLoader [as .js] (/Users/rich/.config/yarn/global/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/Users/rich/i18n-fe/event/node_modules/react-xr/dist/index.cjs.js:12:32)
    at Module._compile (internal/modules/cjs/loader.js:936:30)

the source demo code is

import React, { useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { VRCanvas } from 'react-xr'
import { Canvas, useFrame } from 'react-three-fiber'
import * as three from 'three'

function Box(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef()

  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)

  // Rotate mesh every frame, this is outside of React without overhead
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))

  return (
      <mesh
        {...props}
        ref={mesh}
        scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
        onClick={(e) => setActive(!active)}
        onPointerOver={(e) => setHover(true)}
        onPointerOut={(e) => setHover(false)}>
        <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
        <meshStandardMaterial attach="material" color={hovered ? 'hotpink' : 'orange'} />
      </mesh>
  )
}

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

[drcmda]

three/jsm is published without transpilation, node doesn't understand "import", nothing we can do. but this isn't new, you can tell next to use esm modules, they have some sort of function for it. you'll find solutions in the next issue tracker.

[xQuotes]

three/jsm is published without transpilation, node doesn't understand "import", nothing we can do. but this isn't new, you can tell next to use esm modules, they have some sort of function for it. you'll find solutions in the next issue tracker.

OK, tks

[EliasTouil]

A solution with dynamic imports is available here : #110