THREE.GLTFLoader: Couldn't load texture

[iagormoraes]

Hello there, I'm having issues to load the textures of my GLB. I have followed the README.md file adding the following:

			<AvatarView
				url="https://d1a370nemizbjq.cloudfront.net/d50e8927-9576-48c5-9f02-4e96aff0736b.glb"
				style={{ width: '100px', height: '100px' }}
				rotateAvatar
				eyeBlink
				headMovement
			/>

Environment

"react": "18.1.0",
"react-dom": "18.1.0",
"next": "12.2.2"

Current Behavior

I can't load the 3D model with textures

Expected Behavior

I should be able to render my 3D model with the textures.

Error Trace

THREE.GLTFLoader: Couldn't load texture blob:http://localhost:3000/2ddf6290-d583-4848-b641-f079262a9da4
window.console.error @ next-dev.js?3515:24
overrideMethod @ react_devtools_backend.js:4026
eval @ GLTFLoader.js?bfc0:2050
Promise.catch (async)
loadTextureImage @ GLTFLoader.js?bfc0:2049
loadTexture @ GLTFLoader.js?bfc0:1984
eval @ GLTFLoader.js?bfc0:1781
_invokeOne @ GLTFLoader.js?bfc0:1712
getDependency @ GLTFLoader.js?bfc0:1780
assignTexture @ GLTFLoader.js?bfc0:2067
loadMaterial @ GLTFLoader.js?bfc0:2249
eval @ GLTFLoader.js?bfc0:1775
_invokeOne @ GLTFLoader.js?bfc0:1712
getDependency @ GLTFLoader.js?bfc0:1774
loadMesh @ GLTFLoader.js?bfc0:2379
eval @ GLTFLoader.js?bfc0:1755
_invokeOne @ GLTFLoader.js?bfc0:1712
getDependency @ GLTFLoader.js?bfc0:1754
createNodeMesh @ GLTFLoader.js?bfc0:2629
eval @ GLTFLoader.js?bfc0:2664
_invokeOne @ GLTFLoader.js?bfc0:1712
eval @ GLTFLoader.js?bfc0:2663
loadNode @ GLTFLoader.js?bfc0:2684
getDependency @ GLTFLoader.js?bfc0:1750
buildNodeHierarchy @ GLTFLoader.js?bfc0:2793
eval @ GLTFLoader.js?bfc0:2843
Promise.then (async)
buildNodeHierarchy @ GLTFLoader.js?bfc0:2833
loadScene @ GLTFLoader.js?bfc0:2759
getDependency @ GLTFLoader.js?bfc0:1746
eval @ GLTFLoader.js?bfc0:1820
getDependencies @ GLTFLoader.js?bfc0:1819
eval @ GLTFLoader.js?bfc0:1602
Promise.then (async)
parse @ GLTFLoader.js?bfc0:1601
parse @ GLTFLoader.js?bfc0:210
eval @ GLTFLoader.js?bfc0:77
eval @ three.module.js?6573:36609
load (async)
load @ three.module.js?6573:36587
load @ GLTFLoader.js?bfc0:75
eval @ react-three-fiber.esm.js?79cd:1809
eval @ react-three-fiber.esm.js?79cd:1808
eval @ react-three-fiber.esm.js?79cd:1807
handleAsset @ index.js?fb7e:24
useAsset @ index.js?fb7e:69
useLoader @ react-three-fiber.esm.js?79cd:1823
useGLTF @ useGLTF.js?1117:29
Avatar @ avatar-view.esm.js?a6e2:144
renderWithHooks @ react-reconciler.development.js?3a0c:6412
mountIndeterminateComponent @ react-reconciler.development.js?3a0c:9238
beginWork @ react-reconciler.development.js?3a0c:10476
beginWork$1 @ react-reconciler.development.js?3a0c:16507
performUnitOfWork @ react-reconciler.development.js?3a0c:15337
workLoopSync @ react-reconciler.development.js?3a0c:15268
renderRootSync @ react-reconciler.development.js?3a0c:15231
performSyncWorkOnRoot @ react-reconciler.development.js?3a0c:14821
workLoop @ scheduler.development.js?bcd2:417
flushWork @ scheduler.development.js?bcd2:390
performWorkUntilDeadline @ scheduler.development.js?bcd2:157

[srcnalt]

Updated the package to React 18 in 0.2.13 could you give it a try?

Here is an example with next: 12.2.4, codesandbox didn't run 12.2.2
https://codesandbox.io/s/competent-pascal-bzcfo6?file=/package.json