title: Threejs loading font using fontloader throws and error when using React
body: <p>I'm using the <a href="https://threejs.org/" rel="nofollow noreferrer">ThreeJS</a> library together with <a href="https://reactjs.org/" rel="nofollow noreferrer">React</a>.</p>
  
  <p>I've installed ThreeJS <a href="https://www.npmjs.com/package/three-orbitcontrols" rel="nofollow noreferrer">using npm</a>.</p>
  
  <p>Adding images works fine - I'm importing an image in react like this:</p>
  
  <pre><code>import stockImage from './../../images/download.jpg';
  </code></pre>
  
  <p>and using it like this works great:</p>
  
  <pre><code>this.addCube(stockImage, { x:2, y:2, z:2 } );
  
  (...)
  
  addCube(imageUrl, aPosition) {
          //Load image as material:
          var anImageMaterial = new THREE.MeshBasicMaterial({
              map : this.textureLoader.load(imageUrl)
          });
          //Make box geometry:
          var box = new THREE.BoxGeometry( 1, 1, 1 );
          //Create mesh:
          var cube = new THREE.Mesh( box, anImageMaterial );
          //Add to scene:
          this.scene.add( cube );
          return cube;
      }
  </code></pre>
  
  <p>When trying to add text to the canvas using <a href="https://threejs.org/docs/#api/en/geometries/TextGeometry" rel="nofollow noreferrer">this tutorial</a>.</p>
  
  <p>I'm trying to import the font in react like this:</p>
  
  <pre><code>import helveticaRegular from './../../fonts/helvetiker_regular.typeface.json';
  </code></pre>
  
  <p>Printing it like this looks good, so it doesn't seem to be a problem with react:</p>
  
  <pre><code>console.log(helveticaRegular);
  </code></pre>
  
  <p>However using the font like this throws an error:</p>
  
  <pre><code>var loader = new THREE.FontLoader();
  
  loader.load( helveticaRegular, function ( font ) {
          var geometry2 = new THREE.TextGeometry( 'Hello three.js!', {
              font: font,
              size: 80,
              height: 5,
              curveSegments: 12,
              bevelEnabled: true,
              bevelThickness: 10,
              bevelSize: 8,
              bevelSegments: 5
          } );
          this.scene.add(geometry2);
      } );
  </code></pre>
  
  <p>The error is the following:</p>
  
  <p><a href="https://i.stack.imgur.com/w7pm0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w7pm0.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/KDkbw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KDkbw.png" alt="enter image description here"></a></p>
  
  <p>Please ignore C:/xammp/... as I'm not using xammp, but the folder naming was from when I used xammp.</p>
  
  <p>Loading fonts like this using xammp, using a regular url does not produce the same error.</p>
  
  <p>I don't know if the problem is due to urls or react or the FileLoader.load function in ThreeJS.</p>