What is the best way to add extra plugins to a library that has already been imported through JSPM?

Question

What is the best way to add extra plugins to a library that has already been imported through JSPM?

After successfully importing a 3D rendering library with JSPM, I encountered an issue while trying to import the Orbit Controls plugin for Three.js

import THREE from 'three.js/build/three';

import OrbitControls from 'three.js/examples/js/controls/OrbitControls';

Unfortunately, importing the plugin directly threw an error as it had no reference to the main library

Uncaught ReferenceError: THREE is not definedOrbitControls.js:24 (anonymous function)system.src.js:2187 doEvalsystem.src.js:2153 __evalsystem.src.js:212 asystem.src.js:1019 global.e.metadata.format.e.metadata.executesystem.src.js:540 csystem.src.js:403 ssystem.src.js:715 executees6-module-loader.src.js:1879 oes6-module-loader.src.js:1927 pes6-module-loader.src.js:1701 jes6-module-loader.src.js:1749 kes6-module-loader.src.js:1575 (anonymous function)es6-module-loader.src.js:1177 Oes6-module-loader.src.js:1136 Kes6-module-loader.src.js:927 y.whenes6-module-loader.src.js:818 v.runes6-module-loader.src.js:97 a._draines6-module-loader.src.js:62 draines6-module-loader.src.js:267 b
es6-module-loader.src.js:139 Potentially unhandled rejection [2] Error loading "github:mrdoob/three.js@master/examples/js/controls/OrbitControls" at http://localhost:8080/jspm_packages/github/mrdoob/three.js@master/examples/js/controls/OrbitControls.js
Error loading "github:mrdoob/three.js@master/examples/js/controls/OrbitControls" from "app/main" at http://localhost:8080/app/main.js
Error evaluating http://localhost:8080/jspm_packages/github/mrdoob/three.js@master/examples/js/controls/OrbitControls.js
Uncaught ReferenceError: THREE is not defined (WARNING: non-Error used)

The plugin is supposed to enhance the library's functionality by adding more features like so:

THREE.OrbitControls = function ( object, domElement ) { ... }

I'm now looking for the correct method to import the plugin smoothly without encountering any errors

javascript three.js ecmascript-6

Answer 1

Answer №1

When it comes to the current installation of NPM for three.js (version 0.81.2):

There is a bundle file named three.js

import * as THREE from 'three'; // the build/three.js file from the node_modules/three directory
window.THREE = THREE;
require('three/examples/js/controls/OrbitControls.js');
export default THREE;

Next, in your index.js file:

import THREE from './three';

Answer 2

When it comes to the current installation of NPM for three.js (version 0.81.2):

There is a bundle file named three.js

import * as THREE from 'three'; // the build/three.js file from the node_modules/three directory
window.THREE = THREE;
require('three/examples/js/controls/OrbitControls.js');
export default THREE;

Next, in your index.js file:

import THREE from './three';

Answer 3

Answer №2

This particular scenario involves the initialization of THREE within its own module scope (ModuleEnvironment, details can be found here). It is not being exported and is causing an issue because OrbitControls is searching for THREE within its module scope and then in the global scope. As a result, THREE is not located, leading to an error being thrown.

Here are a couple of ways to address this problem:

If you are coding for browsers, you can opt not to utilize the es6 module system for libraries that do not support it. Instead, load them via script tags and use them as global variables (the traditional method pre-es6).

Another option is to employ system.js. In this scenario, you would need to configure your System as follows:

System.map['TREE'] = 'three.js/build/three';
System.meta['three.js/build/three'] = { format: 'global', exports: 'jQuery' };
System.meta['three.js/examples/js/controls/OrbitControls'] = { deps: 'TREE' }

You can then import these modules like so:

import THREE from 'THREE';
import 'three.js/examples/js/controls/OrbitControls';

Answer 4

This particular scenario involves the initialization of THREE within its own module scope (ModuleEnvironment, details can be found here). It is not being exported and is causing an issue because OrbitControls is searching for THREE within its module scope and then in the global scope. As a result, THREE is not located, leading to an error being thrown.

Here are a couple of ways to address this problem:

If you are coding for browsers, you can opt not to utilize the es6 module system for libraries that do not support it. Instead, load them via script tags and use them as global variables (the traditional method pre-es6).

Another option is to employ system.js. In this scenario, you would need to configure your System as follows:

System.map['TREE'] = 'three.js/build/three';
System.meta['three.js/build/three'] = { format: 'global', exports: 'jQuery' };
System.meta['three.js/examples/js/controls/OrbitControls'] = { deps: 'TREE' }

You can then import these modules like so:

import THREE from 'THREE';
import 'three.js/examples/js/controls/OrbitControls';

What is the best way to add extra plugins to a library that has already been imported through JSPM?

Answer №1

Answer №2

Similar questions

Enhancing Typography in Material UI with Custom Breakpoints in React CustomThemes

What is the reason for using a wrapper with fs.readFile when a callback is included as an argument?

Deactivate JQuery star rating plugin after user has voted

Vuejs unstyled content flash

Include a for loop in the line graph on Google Charts

Elevate the value of a particular element's variable through the execution of a function

Retrieve the data stored in a JSON object

Incorporate a personalized style into the wysihtml5 text editor

Slider Jquery - Displaying Half-Step Visual Bar Lengths

Contemplating the Sequence of DOM Execution

Implementing a Retrofit Null Response in the onSuccess Method

Using CSS to automatically adjust the width of a child div based on its content, rather than stretching it to fill the entire

The word "yargs" will not activate a command within a script

Incorporate object keys into an array using JavaScript

I've mastered using 'for' loops to draw the tree, but I'm now eager to challenge myself with utilizing recursion for the job

Attempting to modify the information within the #content division of a webpage through the activation of a linked image within a jquery slideshow

What could be the reason for the container div's height not being properly refreshed?

Removing a property from a JSON object when initiating an Ajax request in JavaScript

Struggling to get the ReactJS.NET MVC tutorial to function properly?

Tips for inserting a property into an array of objects when it matches the specified ID