Could not load ./test.usdz: undefined

I am trying to load a usdz file in browser using React and THreejs. Here is my code implementation. However, I keep getting error in console that could not load test.usdz

import React, { useState } from “react”;
import { useLoader } from “@react-three/fiber”;
import { USDZLoader } from “three/examples/jsm/loaders/USDZLoader”;

function App() {
const [usdz, setUsdz] = useState(null);

useLoader(USDZLoader, “./test.usdz”, (loaded) => {
console.log(loaded, “loaded”);

return ;

export default App;

Do you mind sharing the USDZ file in this topic?

saeukkang.usdz (3.7 MB)
Room.usdz (33.8 KB)

@Mugen87 - I have aded both files. Files were renamed in project folder.

So saeukkang.usdz does not work for you? It seems it is the file from the official example and it should load without issues (see three.js webgl - loaders - USDZLoader).

However, Room.usdz throws an error:

ncaught (in promise) TypeError: Cannot read properties of undefined (reading 'replace')
    at findMeshGeometry (USDZLoader.js:242:29)
    at buildObject (USDZLoader.js:577:36)
    at buildHierarchy (USDZLoader.js:605:19)
    at buildHierarchy (USDZLoader.js:615:6)
    at buildHierarchy (USDZLoader.js:615:6)
    at buildHierarchy (USDZLoader.js:615:6)
    at USDZLoader.parse (USDZLoader.js:625:3)
    at FileReader.<anonymous> (Loader.js:670:37)

Is the room asset generated with Apple’s RoomPlan?

@Mugen87 - Yup the official file is not working for me. Can you check if I share github repo?

Yes, although it depends how complex your app is. Try to share a minimal code example that demonstrates the issue.

@Mugen87 - Here’s the repo: Musadiqkhan-nullbrainer/laidar-new-app (

Did you get chance to review it?

I was not able to test so far since npm i in your project’s root directory aborts with a runtime error.

Can you take fresh pull. I just ran npm i and it is working

Still get the same error:

npm ERR! code 1
npm ERR! path …/laidar-new-app-master/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c – (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR! sharp: Downloading
npm ERR! node:internal/fs/utils:348
npm ERR! throw err;
npm ERR! ^

Any chances to share a codesandbox or other kind of live example?

@Mugen87 - Please check here: unruffled-newton-6pnyfg - CodeSandbox

Thanks for sharing the live example! After debugging, it seems your issue is related to how you use react-three-fiber. I’m not familiar with this project so I hope somebody else from the community can have a look at your code.

@Mugen87 - Please check this without react-three-fiber

unruffled-newton-6pnyfg - CodeSandbox

Also can you share some codesandbox or repo for usdz implementation with and without react?

Sorry, I also don’t use plain react so I don’t know what’s going wrong.

With plain JS, things work as expected. It’s the code from the original example copied over to a fiddle: three.js dev template - module - JSFiddle - Code Playground

@Mugen87 - Thanks. I was able to implement the usecase. However, I have a few issues. I downloaded this file ( but in console, it says no USDA file found. And also Room.usdz is not working. Any idea what’s going on here? All I can run is the file used in your example.
Room.usdz (33.8 KB)

I think the room asset is not working because of the following known issue documented at GitHub: