Can not import THREEAR as a module

[kalwalt]

Hi @JamesMilnerUK i m testing your lib with React, maybe not the simple approach but was wondering that maybe is easier that others. i have this setup:

1. i created a simple app with create-react-app command
2. i have installed the packages with npm install three threear
3. inside App.js i have this code:

import React from 'react';
import './App.css';
const THREE = require('three');
const AR = require('threear');

class App extends React.Component {

  render(){
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    function animate() {
         requestAnimationFrame( animate );
          renderer.render( scene, camera );
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
      }
    animate();
  return(
  <div></div>
  )
  }
}

export default App;

the Three code works fine If i uncomment the AR require, but with this i get:

/node_modules/threear/dist/THREEAR.js
Module not found: Can't resolve 'THREE' in '/home/walter/kalwalt-github/react-ARjs-experiments/react-threear-example/node_modules/threear/dist'
console.<computed> @ index.js:1375
handleErrors @ webpackHotDevClient.js:151
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:194
push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:56
(anonymous) @ main.js:282
push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:280
push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:53
WebSocketTransport.ws.onmessage @ websocket.js:36

Have you a working example with Node at least?

[JamesLMilner]

Thanks for raising this. I have tested installing with npm and it seemed to work okay, although I haven't tested it since externalizing Three.js so maybe I missed something. I will have a play when I get some time.

[kalwalt]

Thank you @JamesMilnerUK ! Let me know when you have some news.

[JamesLMilner]

@kalwalt this is resolved now! Was a tricky issue with Webpack externals not being configured quite correctly to work with Three.js. Anyway, just install the latest version (v1.0.0-alpha.4) and you should be good :) Again thanks for trying it out!

[kalwalt]

Yes i saw the latest and i confirm thtat it works as expected! @JamesMilnerUK that is perfect!

[kalwalt]

@JamesMilnerUK You can find the example in this github repo: https://github.com/kalwalt/react-AR-experiments