# .obj file importing in react using typescript

**URL:** <https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786>\
**Category:** Questions\
**Tags:** loaders\
**Created:** [March 26, 2021, 6:04am UTC](https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786 "2021-03-26T06:04:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![pcs\_pine](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pcs_pine/32/17326_2.png) [@pcs\_pine](https://discourse.threejs.org/u/pcs_pine)\
**Post date:** [March 26, 2021, 6:04am UTC](https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786/1 "2021-03-26T06:04:19Z")

</div>

I am making react project with typescript. There is need to import .obj file, so I imported threejs library and react-three-fiber library like following;

```javascript
import React, { useState, useMemo } from 'react'
import logo from './logo.svg';
import { Canvas } from 'react-three-fiber';
import { Group } from 'three';
import './App.css';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
function Model({ url }: {url: string}) {
  const [obj, set] = useState<Group>()
  useMemo(() => new OBJLoader().load(url, set), [url])
  
  return obj ? <primitive object={obj} /> : null
}

function App() {
  return (
    
      <Canvas>
          <Model url = '../obj/12328_Statue_v1_L2.obj'/>
      </Canvas>

  );
}

export default App;

```

But obj does not appear. The structure of project folder is as follow picture.

 ![Screenshot 2021-03-26 140552](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/c/5c10f9f985e0925bf52f55fc26ecda640dd7919b.jpeg)  
Next, I have got no idea what, I am just beginner for using typescript in react. I am using react 17.0.3, function component operation. Who can teach me .obj file import code? Help me.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 26, 2021, 9:36am UTC](https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786/2 "2021-03-26T09:36:50Z")

</div>

Do you mind sharing the OBJ file in this topic?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 26, 2021, 9:39am UTC](https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786/3 "2021-03-26T09:39:18Z")

</div>

/cc

> <https://stackoverflow.com/questions/66811380/how-can-i-import-obj-file-in-reactjs-using-typescript>

---

<div class="post-metadata">

**Author:** ![pcs\_pine](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pcs_pine/32/17326_2.png) [@pcs\_pine](https://discourse.threejs.org/u/pcs_pine)\
**Post date:** [March 26, 2021, 10:16am UTC](https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786/4 "2021-03-26T10:16:45Z")

</div>

Yes, I presented same question in stackoverflow, too.  
Can you tell me the answer?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 26, 2021, 10:45am UTC](https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786/5 "2021-03-26T10:45:28Z")

</div>

Would you please respond to: [.obj file importing in react using typescript - #2 by Mugen87](https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786/2)

---

<div class="post-metadata">

**Author:** ![pcs\_pine](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pcs_pine/32/17326_2.png) [@pcs\_pine](https://discourse.threejs.org/u/pcs_pine)\
**Post date:** [March 26, 2021, 11:11am UTC](https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786/6 "2021-03-26T11:11:36Z")

</div>

What do you mean? I don’t care about that. Ah, .obj file is car obj.  
Don’t you know the answer?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 26, 2021, 3:47pm UTC](https://discourse.threejs.org/t/obj-file-importing-in-react-using-typescript/24786/7 "2021-03-26T15:47:54Z")

</div>

youre using a relative path, that cant work because your bundler, any bundler, must know about the file in order to include it in the bundle which some random string won’t allow for. either put the file into `/public` and use `/12328_Statue_v1_L2.obj` or import it

```javascript
import statueUrl from './objects/12328_Statue_v1_L2.obj'

```

files also should not be outside of the src folder, unless you’re using public.

the other thing that could be improved, useLoader, full example:

```javascript
import React, { Suspense } from 'react'
import { Canvas, useLoader } from 'react-three-fiber'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import statueUrl from './objects/12328_Statue_v1_L2.obj'

function Model(url) {
  const group = useLoader(OBJLoader, url)
  return <primitive object={group} />
}

<Canvas>
  <Suspense fallback={null}>
    <Model url={statueUrl} />
  </Suspense>
  ...

```

useLoader eliminates the async back and forth. it executes sync, but the component is async, that puts fallbacks, loading status and error handling into the parents hands where it should be. you can put anything into the fallback, could be another component that displays while the real model is loading, could be a status message, etc.