Unexpected token '.' converting gltf to jsx

[arocam]

I'm trying to convert a glft to jsx with gltfjsx as usual, but now I'm getting the unexpected token '.' . Even with the gltfjsx repository or the files that I had converted.

Im using:

Node v12.18.1,
React: 17.0.1

Thx for any idea

[drcmda]

can you attach your model?

[arocam]

test-animation.zip

[drcmda]

cant reproduce. both local and npx gltfjsx test-animation.glb works.

npx gltfjsx test-animation.gltf

here's the file it produces:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import * as THREE from 'three'
import React, { useRef, useState, useEffect } from 'react'
import { useFrame } from 'react-three-fiber'
import { useGLTF } from '@react-three/drei/useGLTF'
import { PerspectiveCamera } from '@react-three/drei/PerspectiveCamera'

import { useAnimations } from '@react-three/drei/useAnimations'

export default function Model(props) {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/test_animation.gltf')
  const { actions } = useAnimations(animations, group)
  return (
    <group ref={group} {...props} dispose={null}>
      <group position={[7.36, 4.96, 6.93]} rotation={[1.24, 0.33, -0.76]}>
        <PerspectiveCamera makeDefault={false} far={100} near={0.1} fov={22.9} rotation={[-Math.PI / 2, 0, 0]} />
      </group>
      <group position={[2.64, 0.71, -1.84]}>
        <pointLight intensity={79.3} decay={2} rotation={[-Math.PI / 2, 0, 0]} />
      </group>
      <mesh
        name="Card000"
        material={materials.Material}
        geometry={nodes.Card000.geometry}
        position={[-1.57, 4.08, -1.12]}
        scale={[0.01, 0.66, 1.15]}
      />
      <mesh
        name="Card001"
        material={materials['Material.001']}
        geometry={nodes.Card001.geometry}
        position={[-1.22, 3.68, -1.73]}
        scale={[0.01, 0.66, 1.15]}
      />
      <mesh
        name="Card002"
        material={materials['Material.002']}
        geometry={nodes.Card002.geometry}
        position={[-1.97, 4.08, -1.12]}
        scale={[0.01, 0.66, 1.15]}
      />
      <mesh
        material={materials['Material.003']}
        geometry={nodes.Plane.geometry}
        position={[0, -1.26, 0]}
        rotation={[0, 0, -Math.PI / 2]}
      />
    </group>
  )
}

useGLTF.preload('/test_animation.gltf')

[ghost]

Im having the same issue, I posted about this 5 hours ago. It seems that this came about during the last update 4 days ago.

[ghost]

Its saying the error starts here "let hasAnimations = gltf.animations?.length > 0"

[ghost]

It's likely line 72 in the modules folder of the gltfjsx.js components. Is that a random question mark or is that needed?

https://twitter.com/Identity_jpg/status/1336199994706018305?s=20

I tried deleting the question mark, but I don't know how to run node modules directly after they are edited.

[drcmda]

Is that a random question mark or is that needed?

https://github.com/tc39/proposal-optional-chaining

in the browser it's 100% safe to use due to babel. sometimes hard for me to go back to programming without babel. my node has that feature, yours hasnt. but i removed it.