OBJLoader doesn't work

I tried to load an OBJ model to <primitive /> using useMemo, as in README, but it doesn’t work 😕

Repo

In the error stack trace, it says that error is dropped by react-reconciler:

TypeError: instance is undefined
    createInstance index.js:200
    completeWork react-reconciler.development.js:8883
    completeUnitOfWork react-reconciler.development.js:11125
    performUnitOfWork react-reconciler.development.js:11323
    workLoop react-reconciler.development.js:11335
    renderRoot react-reconciler.development.js:11418
    performWorkOnRoot react-reconciler.development.js:12325
    performWork react-reconciler.development.js:12237
    performSyncWork react-reconciler.development.js:12211
    requestWork react-reconciler.development.js:12080
    scheduleWork react-reconciler.development.js:11894
    scheduleRootUpdate react-reconciler.development.js:12555
    updateContainerAtExpirationTime react-reconciler.development.js:12583
    updateContainer react-reconciler.development.js:12640
    render index.js:414
    Canvas index.js:680
    React 8
    unstable_runWithPriority scheduler.development.js:255
    React 7
    dispatchAction self-hosted:1104
    _useState2 index.js:484
    broadcastActive ResizeObserver.es.js:858
    updateObservers_ ResizeObserver.es.js:317
    forEach self-hosted:266
    updateObservers_ ResizeObserver.es.js:317
    refresh ResizeObserver.es.js:292
    <anonymous> self-hosted:1001
    resolvePending ResizeObserver.es.js:164

I tried to load the model using OBJLoader from THREE:

import React, { useMemo } from 'react'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

const Model = ({ url }) => {
  const obj = useMemo(() => new OBJLoader().load(url), [url])
	return <primitive object={obj} />
}
export default Model

and then, in App.js:

import React from 'react'
import { render } from 'react-dom'
import { Canvas } from 'react-three-fiber'
import Model from '/Model'
import Controls from '/Controls'

const App = () => {
  return (
    <main>
      <Canvas>
        <Model url="C:\Users\User\Desktop\Coding\learn-threejs\demo.obj" />
        <Controls />
      </Canvas>
    </main>
  )
}
render(<App />, document.getElementById('app'))

[drcmda]

i think you’re passing undefined to primitive, since objloader is probably async. you can either look into reacts new suspense api (https://codesandbox.io/s/reactthreefiber-suspense-gltf-loader-vk48w) or do something like this:

function Model({ url }) {
  const [obj, set] = useState()
  useMemo(() => new OBJLoader().load(url, set), [url])
  return obj ? <primitive object={obj} /> : null

[drcmda]

this has gotten easier though, no need for useMemo/useEffect

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