three.js OBJLoader not loading in react

Question

I am trying to load an object (.obj) file to use with three.js and react (with react-three-renderer), yet get an My code looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import React3 from 'react-three-renderer';
import TrackballControls from './TrackballControls';
import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
OBJLoader(THREE);

class MyClass extends React.Component {
...
  render() {
    ...
    const objLoader = new THREE.OBJLoader();
  }
}

However, I keep on getting: "export 'OBJLoader' (imported as 'THREE') was not found in 'three' Anyone with an idea?

Answer 1

So it seems that adding this.THREE = THREE to the react component does the trick (weird, eh?). So my code currently looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import React3 from 'react-three-renderer';
import TrackballControls from './TrackballControls';
import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
OBJLoader(THREE);

class MyClass extends React.Component {
...
  render() {
    ...
    this.THREE = THREE;
    const objLoader = new this.THREE.OBJLoader();
  }
}

Answer 2

OBJLoader is now part of the core three.js library, so you can access it simply by doing:

 const objLoader = new THREE.OBJLoader();

While removing the lines:

import * as OBJLoader from 'three-obj-loader';
OBJLoader(THREE);

Since you have already imported the three.js library in your code.