0

Hello and thank you for your time, I am beginner learning JavaScript and I would like to know how is this difficulty faced:

We would like to import module A which is a npm module and has ES6 export syntax:

import * as A from 'a';

Then, we would like to use another file which has also ES6 export and depends on the first one, so it would be used as: A.B

import B from 'b';

Why does the console output the following?

B.js

Reference Error: A is not defined

If you are curious, this is a generalization of the issue being faced trying to integrate THREE (A) with NRRDLoader (B):

https://github.com/YoneMoreno/ThreeReactNRRDLoaderStandalone.git

EDIT:

To put in context this question I show the exact files being involved:

App.js (main React / JavaScript App file)

import React, {Component} from 'react';
import './App.css';
import * as THREE from "three";
import NRRDLoader from '../node_modules/three/examples/js/loaders/NRRDLoader';
import TrackballControls from '../node_modules/three/examples/js/controls/TrackballControls';


class App extends Component {
    constructor(props) {
        super(props);

        this.stop = this.stop.bind(this);
        this.start = this.start.bind(this);
        this.animate = this.animate.bind(this)
    }

    componentDidMount() {
        const width = this.mount.clientWidth;
        const height = this.mount.clientHeight;

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(
            75,
            width / height,
            0.1,
            1000
        );


        scene.add(camera);

        const loader = new NRRDLoader();
        loader.load("models/columnasegmentado01.nrrd", function (volume) {
            let sliceZ;


            //z plane

            const indexZ = 0;
            sliceZ = volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4));
            sliceZ.name = 'foo';
            console.log(sliceZ);
            scene.add(sliceZ.mesh);

        });

        var renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);


        renderer.setClearColor('#000000');
        renderer.info.autoReset = false;
        console.log(renderer.info);

        this.scene = scene;
        window.scene = scene;
        this.camera = camera;
        this.renderer = renderer;

        let controls = new TrackballControls(camera, renderer.domElement);
        controls.rotateSpeed = 0;
        controls.zoomSpeed = 5;
        controls.panSpeed = 2;
        controls.noZoom = false;
        controls.noPan = false;
        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0.3;


        this.mount.appendChild(this.renderer.domElement);
        this.start()
    }

    componentWillUnmount() {
        this.stop();
        this.mount.removeChild(this.renderer.domElement)
    }

    // Perhaps this is added for performance reasons?
    shouldComponentUpdate() {
        return false
    }


    start() {
        if (!this.frameId) {
            this.frameId = requestAnimationFrame(this.animate)
        }
    }

    stop() {
        cancelAnimationFrame(this.frameId)
    }

    animate() {


        this.renderScene();
        this.frameId = window.requestAnimationFrame(this.animate)
    }

    renderScene() {
        this.renderer.render(this.scene, this.camera)
    }

    render() {
        return (
            <div
                style={{width: '2000px', height: '2000px'}}
                ref={(mount) => {
                    this.mount = mount
                }}
            />
        )
    }
}

export default App;

Three.module.js (A):

https://github.com/mrdoob/three.js/blob/dev/build/three.module.js

NRRDLoader (B):

https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/NRRDLoader.js

Thank you for your help!

Yone
  • 2,064
  • 5
  • 25
  • 56
  • You seem to have three files (main, a, b). Please post all of them, including their complete content. I currently cannot see where you would use `A.B`. – Bergi Mar 09 '18 at 12:03
  • `NRRD Loader` is expecting `THREE` to be available as a global variable. It's not done in ES6 modular code. Check this post on [making something available globally if you are using webpack](https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack) – sabithpocker Mar 09 '18 at 12:33
  • Also [go through this issue in GitHub](https://github.com/mrdoob/three.js/issues/9562) – sabithpocker Mar 09 '18 at 12:35
  • Thank you @sabithpocker for your help. I have just tried in index.js to put window.THREE = THREE; and window.THREE = 'THREE'; and it outputs: ReferenceError: THREE is not defined – Yone Mar 09 '18 at 13:02
  • I have also tried to make a globals.js and I put: import * as THREE from 'three'; export default {THREE}; And in index.js we put: import THREE from './globals'; The console stills telling us: ReferenceError: THREE is not defined – Yone Mar 09 '18 at 13:06
  • Here I tried to combine making a global variable in WebPack with: import * as THREE from 'three'; window.THREE = 'THREE'; in index.js and also to suppress linter errors with: /*globals THREE*/ in NRRDLoader file, however: ReferenceError: THREE is not defined – Yone Mar 09 '18 at 13:13
  • You can post this as a different question. "Trying to setup THREE as a global using webpack" or so. Add whatever setup you have already made. – sabithpocker Mar 09 '18 at 14:29

0 Answers0