title: White Screen Error when using jsx file to create a GLB in my react three canvas
body: <p>Heres the issue, I have been reading documentation on how to use a glb file with react three and three.js to have a 3D model on my site.</p>
  <p>The issue is every tutorial seems to work fine, but nothing is working on my end.</p>
  <p>My &quot;Intro&quot; component calls the &quot;Char&quot; function from a Model.jsx file</p>
  <pre><code>import &quot;./intro.scss&quot;
  import Char from '../model/Model'
  import { Canvas } from &quot;@react-three/fiber&quot;
  
  export default function Intro() {
    return (
      &lt;div className=&quot;intro&quot; id=&quot;intro&quot;&gt;
        &lt;div className=&quot;left&quot;&gt;
          &lt;Canvas&gt;
            &lt;Char/&gt;
          &lt;/Canvas&gt;
        &lt;/div&gt;
        &lt;div className=&quot;right&quot;&gt;
          &lt;div className=&quot;wrapper&quot;&gt;
            &lt;h2&gt;Personal Site Test&lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Model.jsx :</p>
  <pre><code>import React from &quot;react&quot;;
  import { useGLTF } from &quot;@react-three/drei&quot;;
  
  export default function Char(props) {
    const { nodes, materials } = useGLTF(&quot;/model.glb&quot;);
    return (
      &lt;group {...props} dispose={null}&gt;
        &lt;group position={[0, 0, -0.2]}&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002.geometry}
            material={materials.Voxel_mat249}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_1.geometry}
            material={materials.Voxel_mat233}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_2.geometry}
            material={materials.Voxel_mat225}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_3.geometry}
            material={materials.Voxel_mat242}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_4.geometry}
            material={materials.Voxel_mat235}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_5.geometry}
            material={materials.Voxel_mat234}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_6.geometry}
            material={materials.Voxel_mat241}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_7.geometry}
            material={materials.Voxel_mat244}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_8.geometry}
            material={materials.Voxel_mat250}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_9.geometry}
            material={materials.Voxel_mat243}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_10.geometry}
            material={materials.Voxel_mat226}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_11.geometry}
            material={materials.Voxel_mat227}
          /&gt;
          &lt;mesh
            castShadow
            receiveShadow
            geometry={nodes.Cube002_12.geometry}
            material={materials.Voxel_mat228}
          /&gt;
        &lt;/group&gt;
      &lt;/group&gt;
    );
  }
  
  useGLTF.preload(&quot;/model.glb&quot;);
  </code></pre>
  <p>This is getting its GLB information from my /public/model/model.glb (In the <a href="https://i.stack.imgur.com/gNKPR.png" rel="nofollow noreferrer">picture</a> I put an arrow to the three files I am talking about)</p>
  <p>Here is also the error code from the react console that is not showing up in my terminal when working:</p>
  <pre><code>react-dom.development.js:86 Warning: You are importing createRoot from &quot;react-dom&quot; which is not supported. You should instead import it from &quot;react-dom/client&quot;.
  printWarning @ react-dom.development.js:86
  chunk-7EZKCG2T.js:34 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
  lct @ chunk-7EZKCG2T.js:34
  2index.js:21 Uncaught Error: Could not load /model.glb: Unexpected token '&lt;', &quot;&lt;!DOCTYPE &quot;... is not valid JSON)
      at index-212b30d8.esm.js:1613:1
      at _onError (GLTFLoader.js:61:1)
      at Object.onLoad (GLTFLoader.js:82:1)
      at three.module.js:39938:1
  react-reconciler.development.js:9747 The above error occurred in the &lt;Char&gt; component:
  
      at Char
      at Suspense
      at ErrorBoundary (http://localhost:3000/static/js/bundle.js:1535:5)
      at Provider (http://localhost:3000/static/js/bundle.js:3478:5)
  
  React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
  logCapturedError @ react-reconciler.development.js:9747
  2react-three-fiber.esm.js:138 Uncaught Error: Could not load /model.glb: Unexpected token '&lt;', &quot;&lt;!DOCTYPE &quot;... is not valid JSON)
      at index-212b30d8.esm.js:1613:1
      at _onError (GLTFLoader.js:61:1)
      at Object.onLoad (GLTFLoader.js:82:1)
      at three.module.js:39938:1
  react-dom.development.js:18687 The above error occurred in the &lt;ForwardRef(Canvas)&gt; component:
  
      at Canvas (http://localhost:3000/static/js/bundle.js:3806:5)
      at div
      at div
      at Intro
      at div
      at div
      at App (http://localhost:3000/static/js/bundle.js:46:82)
  
  Consider adding an error boundary to your tree to customize error handling behavior.
  Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
  logCapturedError @ react-dom.development.js:18687
  react-dom.development.js:26923 Uncaught Error: Could not load /model.glb: Unexpected token '&lt;', &quot;&lt;!DOCTYPE &quot;... is not valid JSON)
      at index-212b30d8.esm.js:1613:1
      at _onError (GLTFLoader.js:61:1)
      at Object.onLoad (GLTFLoader.js:82:1)
      at three.module.js:39938:1
  three.module.js:27169 THREE.WebGLRenderer: Context Lost.
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ObiAe.png" rel="nofollow noreferrer">And here is a picture of how the site looks currently.</a></p>
  <p>I have tried using gltf and obj files but none seem to work. I have tried many different methods including Suspense to hug the Char component.</p>