Error encountered in Firefox: THREE.js throws a TypeError because 'global' is undefined

Question

Error encountered in Firefox: THREE.js throws a TypeError because 'global' is undefined

After attempting to integrate three.js into my code as a standalone script without using webpack, browserify or requirejs, I encountered an issue. My setup involves loading an external Angular app and extending it, but now I need my own version of THREE.js within the codebase.

Although the library gets loaded, the first line tries to set a variable 'global' which appears to be undefined. What could I be overlooking?

// edit:

I am utilizing a JavaScript API from another company. It's unclear whether they define the 'global' variable, but Three.js seems to rely on it even though I'm not using it in a node setup. In all the examples, it typically works as a drop-in script.

If I switch to the minified version, the error message changes to

TypeError: global is undefined *three.min.js:2:168

anonymous https://localhost:9000/scripts/three.min.js:2:168

anonymous https://localhost:9000/scripts/three.min.js:2:2*

This issue arises from the initial lines of the three.js file:

function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.THREE = {}))); }(this, (function (exports) { 'use strict'; ...

//EDIT 2:

I have finally identified the cause of this error. When using gulp-babel and including scripts with that snippet at the top, Babel attempts to replace 'THIS' with the current context, which is - unsurprisingly - undefined. This results in Babel literally replacing 'this' with 'undefined'. Therefore, never run babel() on your final vendor files!

javascript three.js requirejs babeljs commonjs

Answer 1

Answer №1

There is no issue with the portion of THREE.js you presented in your inquiry. By focusing solely on the problem at hand and removing the code related to CommonJS and AMD scenarios, it can be simplified to this:

(function (global, factory) {
  factory(global.THREE = {}); 
}(this, (function (exports) { 'use strict';
  // ...
})));

This pattern is quite common. The initial anonymous function is invoked with this as its first argument, setting global to the value of this within the global scope. When this snippet runs at the top level, this automatically adopts the value of the global object in the current environment. In Node.js, this object is referred to as global. To verify this, open a Node session and input:

global === this

You should receive true as output. In a browser context, the global object is typically named window. Open the developer console and type:

window === this

Again, you will observe true displayed. Therefore, the purpose of using this within the anonymous function is to acquire a reference to the global object regardless of the execution location. This method eliminates the need to differentiate between window, global, or any other possible global identifiers. It effectively passes this to the function, facilitating access to the global object. This approach is widely utilized and reliable.

Nevertheless, there are circumstances where this mechanism may fail to function correctly. For instance, if the code block mentioned earlier is enveloped within another function that enforces strict mode, then this would become undefined, rendering global also undefined. Consider this example:

(function() {
  "use strict";
  (function(global, factory) {
    console.log("XXX", global); // Output: "XXX undefined"
  }(this, (function(exports) {
    'use strict';
  })));
}());

At times, additional wrapping structures introduced by build processes or code loaders might disrupt the original functionality of the code.

Answer 2

There is no issue with the portion of THREE.js you presented in your inquiry. By focusing solely on the problem at hand and removing the code related to CommonJS and AMD scenarios, it can be simplified to this:

(function (global, factory) {
  factory(global.THREE = {}); 
}(this, (function (exports) { 'use strict';
  // ...
})));

This pattern is quite common. The initial anonymous function is invoked with this as its first argument, setting global to the value of this within the global scope. When this snippet runs at the top level, this automatically adopts the value of the global object in the current environment. In Node.js, this object is referred to as global. To verify this, open a Node session and input:

global === this

You should receive true as output. In a browser context, the global object is typically named window. Open the developer console and type:

window === this

Again, you will observe true displayed. Therefore, the purpose of using this within the anonymous function is to acquire a reference to the global object regardless of the execution location. This method eliminates the need to differentiate between window, global, or any other possible global identifiers. It effectively passes this to the function, facilitating access to the global object. This approach is widely utilized and reliable.

Nevertheless, there are circumstances where this mechanism may fail to function correctly. For instance, if the code block mentioned earlier is enveloped within another function that enforces strict mode, then this would become undefined, rendering global also undefined. Consider this example:

(function() {
  "use strict";
  (function(global, factory) {
    console.log("XXX", global); // Output: "XXX undefined"
  }(this, (function(exports) {
    'use strict';
  })));
}());

At times, additional wrapping structures introduced by build processes or code loaders might disrupt the original functionality of the code.

Answer 3

Answer №2

When dealing with gulp, it can be quite tricky to make babel ignore specific files. One workaround for this issue is to simply replace this with window on line 5 of three.js:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.THREE = {})));
}(window, (function (exports) { 'use strict';

Answer 4

When dealing with gulp, it can be quite tricky to make babel ignore specific files. One workaround for this issue is to simply replace this with window on line 5 of three.js:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.THREE = {})));
}(window, (function (exports) { 'use strict';

Answer 5

Answer №3

Looking for a solution? Simply include this concise line of code at the top of your script, within the overarching scope:

if (typeof main === "undefined"){main=window;}

This will link the main object to the window object, where all global variables are stored in the browser environment.

Answer 6

Looking for a solution? Simply include this concise line of code at the top of your script, within the overarching scope:

if (typeof main === "undefined"){main=window;}

This will link the main object to the window object, where all global variables are stored in the browser environment.

Error encountered in Firefox: THREE.js throws a TypeError because 'global' is undefined

Answer №1

Answer №2

Answer №3

Similar questions

Cloning jQuery with varied PHP array value

What is the best way to initiate the registration page through the @auth0/auth0-react library?

Navigating using Javascript library in Angular 2 framework

Using node-native to authenticate in MongoDB is a surefire way to ensure the

What is the best way to invoke a function only once in typescript?

The function of style.marginRight differs from that of style.marginLeft

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

Guide for Uploading, presenting, and storing images in a database column with the help of jQuery scripting language

Steps to create a personalized material-ui element

import JavaScript script from a NPM package installation

Tips for Preserving Texture Resolution in Three.js While Adjusting Mesh Scale

Is there a way to bypass the default layout on app router in Next.js and implement our own custom page layout

Insert a new class within the container div

What could be causing the computed property in Vue 2 component to not return the expected state?

Retrieve the height data from a displacement map by utilizing Three.js

Observable task queuing

I'm receiving the error message "Fatal error: Call to a member function query() on a non-object," what could be causing this issue?

What could be causing my JavaScript loop to replace existing entries in my object?

The process of updating UseContext global state in React Native and ensuring that the change is reflected across all screens

Exploring the use of leaflets within LitElement