Three.js fails to load due to Require.js issue

Question

Three.js fails to load due to Require.js issue

Having encountered a JavaScript error in browser (on the last line mentioned above) with generated code from TypeScript:

define(["require", "exports", "three", "jquery", "./test"], function (require, exports, THREE, jQuery, Test) {
var Main = (function () {
    function Main() {
        this.container = jQuery('#test');
        this.scene = new THREE.Scene();
...

The error message states: Uncaught TypeError: Cannot read property 'Scene' of undefined.

It is interesting that jQuery functions properly while Three.js seems to not be loading at all.

Configurations for requires are as follows:

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    }
});

jQuery is located in the 'js/src' directory, whereas Three.js resides in 'js/three/three.js' (The use of Express hides the js folder from the browser, and relocating three.js to the src folder didn't resolve the issue). Sizzle stands alone due to previous errors when it was placed within a subfolder under src directory.

Am I overlooking something obvious in regards to this issue? I am currently stumped with no clear leads.

javascript three.js requirejs

Answer 1

Answer №1

Starting from r72

Beginning with r72, the use of define is now required three times. This means you should avoid setting a shim. If your code does not depend on THREE being accessible globally, then you are all set.

However, if there is code that relies on having access to THREE globally, this can pose an issue because as a properly functioning AMD module, THREE no longer leaks into the global space. To address this, you can create a module like the one below to ensure THREE is available globally just before calling requirejs.config:

define("three-glue", ["three"], function (three) {
    window.THREE = three;
    return three;
});

Your RequireJS configuration should include the following map:

map: {
  '*': {
    three: 'three-glue'
  },
  'three-glue': {
    three: 'three'
  }
}

This mapping instructs RequireJS to load three-glue wherever three is needed and vice versa when three is required within three-glue.

All together:

define("three-glue", ["three"], function (three) {
    window.THREE = three;
    return three;
});

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    },
    map: {
        '*': {
            three: 'three-glue'
        },
        'three-glue': {
            three: 'three'
        }
    }
});

(Technical note: Although r72 initially leaked to the global space, some subsequent versions did the same. The most recent version at the time of writing this (r83) no longer has this leakage capability. Using the provided code with an older AMD-compliant version that does leak is safe but results in unnecessary code.)

If using r71 or earlier

If referencing this file, it appears that three does not utilize define. In such cases, you will need a shim to assign a value when requiring it as a module. Here's an example of how to do so:

shim: {
    three: {
        exports: 'THREE'
    }
}

Considering the configuration provided in your question:

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    },
    shim: {
        three: {
          	exports: 'THREE'
        }
    }
});

Answer 2

Starting from r72

Beginning with r72, the use of define is now required three times. This means you should avoid setting a shim. If your code does not depend on THREE being accessible globally, then you are all set.

However, if there is code that relies on having access to THREE globally, this can pose an issue because as a properly functioning AMD module, THREE no longer leaks into the global space. To address this, you can create a module like the one below to ensure THREE is available globally just before calling requirejs.config:

define("three-glue", ["three"], function (three) {
    window.THREE = three;
    return three;
});

Your RequireJS configuration should include the following map:

map: {
  '*': {
    three: 'three-glue'
  },
  'three-glue': {
    three: 'three'
  }
}

This mapping instructs RequireJS to load three-glue wherever three is needed and vice versa when three is required within three-glue.

All together:

define("three-glue", ["three"], function (three) {
    window.THREE = three;
    return three;
});

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    },
    map: {
        '*': {
            three: 'three-glue'
        },
        'three-glue': {
            three: 'three'
        }
    }
});

(Technical note: Although r72 initially leaked to the global space, some subsequent versions did the same. The most recent version at the time of writing this (r83) no longer has this leakage capability. Using the provided code with an older AMD-compliant version that does leak is safe but results in unnecessary code.)

If using r71 or earlier

If referencing this file, it appears that three does not utilize define. In such cases, you will need a shim to assign a value when requiring it as a module. Here's an example of how to do so:

shim: {
    three: {
        exports: 'THREE'
    }
}

Considering the configuration provided in your question:

requirejs.config({
    baseUrl: "src",
    paths: {
        "main": "../main",
        "test": "../test",
        "three": "../three/three",
        "sizzle": "/src/sizzle/dist/sizzle"
    },
    shim: {
        three: {
          	exports: 'THREE'
        }
    }
});

Three.js fails to load due to Require.js issue

Answer №1

Starting from r72

If using r71 or earlier

Similar questions

KnockoutJS's data binding feature is failing to display any content within the table rows

Encountered a server error while trying to export from Content

Could Ramda assist in enhancing pipeline/composition processes with a logging feature?

Is it a scope issue if ng-click is not firing and the function is not working properly?

Is it possible to link actions to a storage location external to a component?

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

"Creating a Miniview Panel on a Fabric Canvas: A Step-by-Step Guide

Attempting to recreate the dynamic banner featured in the video

After completing the mapSeries operation, I aim to re-implement the function

Determining the Clicked Button in React When Multiple Buttons are Present

Establishing a bidirectional binding directive attribute within an AngularJS HTML structure

Obtain user input and showcase it on the screen using a combination of Ajax and PHP

The animation function in A-frame causes entities to vanish when used with D3.js

Want to learn about Google Apps Script Web App? Join us to dive into AJAX, leverage

Having trouble transferring a PHP string to jQuery

Firestore Query sends data object to browser

Converting a local Node.js server to an online server: A step-by-step guide

Where is the best place to insert Javascript code in an HTML file - the head or body section?

Incorporate information into a React component

Executing Java output to Node.js console using child_process execSync without buffering