Trying to setup THREE as a global using webpack

Question

Hello and thank you for your help!

I am learning JavaScript and React and I would like to integrate THREE with them.

I am looking for a reliable way to convert THREE in a global variable.

I have already tried:

In entry point, index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import * as THREE from 'three';

window.THREE = THREE;


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Following the 4th method listed in: Define global variable with webpack

Gives us the following output:

ReferenceError: THREE is not defined
./node_modules/three/examples/js/loaders/NRRDLoader.js
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/node_modules/three/examples/js/loaders/NRRDLoader.js:4
  1 | 
  2 | 
  3 | 
> 4 | THREE.NRRDLoader = function (manager) {
  5 | 
  6 |     this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
  7 | 
View compiled
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/App.js
http://localhost:3001/static/js/bundle.js:82335:109
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/index.js
http://localhost:3001/static/js/bundle.js:82532:63
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
0
http://localhost:3001/static/js/bundle.js:82680:18
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
./node_modules/ansi-regex/index.js.module.exports
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:724
  721 | __webpack_require__.h = function() { return hotCurrentHash; };
  722 | 
  723 | // Load entry module and return exports
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View compiled

Then I tried the 1st method:

To make a globals.js file:

import * as THREE from 'three';

export default THREE;

Then we import it on the main entry point: index.js

import THREE from './globals'

And the output is:

ReferenceError: THREE is not defined
./node_modules/three/examples/js/loaders/NRRDLoader.js
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/node_modules/three/examples/js/loaders/NRRDLoader.js:4
  1 | 
  2 | 
  3 | 
> 4 | THREE.NRRDLoader = function (manager) {
  5 | 
  6 |     this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
  7 | 
View compiled
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/App.js
http://localhost:3001/static/js/bundle.js:82335:109
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/index.js
http://localhost:3001/static/js/bundle.js:82547:63
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
0
http://localhost:3001/static/js/bundle.js:82693:18
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
./node_modules/ansi-regex/index.js.module.exports
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:724
  721 | __webpack_require__.h = function() { return hotCurrentHash; };
  722 | 
  723 | // Load entry module and return exports
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View compiled
(anonymous function)
http://localhost:3001/static/js/bundle.js:728:10

This thread is related to the previous one:

JavaScript: How could we import ES6 modules which are interdependent?

Also I have read this GitHub thread where they disscuss why some THREEJS files have not been converted to ES6 syntax, especially loaders:

https://github.com/mrdoob/three.js/issues/9562

Could you help me please, figuring out how to configure a global THREE vriable in WebPack? Thank you.

Have you tried this: https://stackoverflow.com/questions/29080148/expose-jquery-to-real-window-object-with-webpack — lukas-reineke, Mar 09 '18 at 17:47
Hello @lukas-reineke thank you for your help! I have tried the most rated answer, and added require("expose-loader?THREE!three"); to index.js which is the entry point and it outputs: Failed to compile ./src/index.js Line 7: Unexpected '!' in 'expose-loader?THREE!three'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax Search for the keywords to learn more about each error. — Yone, Mar 10 '18 at 20:05

Trying to setup THREE as a global using webpack

0 Answers0