When importing OrbitControls in main.js, THREE.js does not include the EventDispatcher export

Description

I've been working on integrating the OrbitControls from THREE.js into my project. However, I encountered an error message in the Google Chrome DevTools console when trying to import the OrbitControls object.

The requested module './three.js' does not provide an export named 'EventDispatcher'

Upon manual inspection of three.js (r119), it's evident that the export EventDispatcher is present on line 50631.

Question: Based on this information, what could be causing the mentioned error message, and how can I resolve it?

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="three.js" crossorigin="anonymous"></script>
    <script src="main.js" type="module"></script>
</body>
</html>

main.js

import { OrbitControls } from './OrbitControls.js'

EDIT: Following advice from Steve, it was uncovered that the root cause of my issue stemmed from mistakenly using the non-module version of three.js instead of the appropriate one (in my case) known as three.module.js. To address the error message, ensure you are downloading the correct file - three.module.js.

javascriptthree.js

Answer №1

It seems that you are utilizing the OrbitControls.js file from the repository located at https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/OrbitControls.js

There appears to be a mix-up between the module and non-module libraries. Upon examining the initial lines of OrbitControls.js

import {
    EventDispatcher,
    MOUSE,
    Quaternion,
    Spherical,
    TOUCH,
    Vector2,
    Vector3
} from "../../../build/three.module.js";

The code is attempting to import variables from ../../../build/three.module.js, which may not exist. Based on the error message provided, it seems like someone may have already altered it to './three.js', indicating the non-module version.

Possible Solutions

Maintaining References

  • Save all of three.js into a designated folder (e.g., lib/three)
  • (Optional) Remove unnecessary files

Import as follows:

import { OrbitControls } from './lib/three/examples/jsm/controls/OrbitControls.js';
import * as THREE from './lib/three/build/three.module.js';

Adapting Required Files Only

You can choose to download only the essential files and modify the references:

Utilizing a Content Delivery Network (CDN)

An alternative approach is to link directly to a CDN, for instance:

import { OrbitControls } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5918d978080a5d5cbd4d4dccbd4">[email protected]</a>/examples/jsm/controls/OrbitControls.js';
import * as THREE from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98ecf0eafdfdd8a8b6a9a9a1b6a9">[email protected]</a>/build/three.module.js';

This method works since all necessary files are hosted by the CDN

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AJAX requests sent from different origins to AWS S3 may encounter CORS errors on occasion

My current objective is to access publicly available files stored in S3. The CORS configuration for my S3 setup is as follows: <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> < ...

javascriptajaxamazon-web-servicesamazon-s3cors

Using Angular 2 routes to navigate to various applications

I'm currently developing multiple versions of my application in different languages. Utilizing AOT (ahead of time) compilations, the end result is static deployable sites organized in a structure like this: dist - index.html -- default entry file f ...

javascriptangularangular-routingangular-i18n

Utilize Vue.js to transmit HTTP requests with specified headers and parameters

I'm trying to figure out how to create a LinkedIn login component, but I'm having trouble finding information about headers and parameters. Can someone help me understand how to send a GET or POST request with parameters and headers? Here's ...

javascriptvue.jsaxioslinkedin-api

Searching for a value in Mongodb using a dynamic key with Node.js

I have been attempting to retrieve a value associated with a key in MongoDB, but so far I have been unsuccessful. Here is an example of my output: { "_id" : { "$oid" : "52cfc91adbffcbe08ccf94b0"} , "customerInfo" : "value"} For instance, if the user inpu ...

javascriptnode.jsmongodb

Numerous references embedded within a Vue.js component

I am currently working with multiple instances of a polygonCrop component in Vue.js, each one having a unique reference to a canvas property. These components are utilized in separate crop functions triggered by button clicks. My question is how to effecti ...

javascriptvue.js

Is there a way to incorporate a callback function for animation in cgscenegraph?

After creating my animation, I am interested in incorporating a callback function when the loop of the animation comes to an end. Is there a way you can guide me on achieving this? Thank you. ...

javascripthtmlanimationcanvasframeworks

Inquiries regarding scopes, node.js, and express

I struggle with understanding scopes and similar concepts in various programming languages. Currently, I am working on an express application where I take user input, query an arbitrary API, and display the results in the console. To interact with the REST ...

javascriptnode.jsinheritanceexpressscopes

Managing asynchronous requests with RxJS for time-spaced dependent API calls

I am currently working on developing a code in Angular 11 to handle the following scenario: I have a list of files, and for each file, I need to make an API call (let's say api1) to retrieve a fileId from the response. Subsequently, I will use this f ...

javascriptangularrxjsrxjs-observables

Working with Node.js and MySQL can involve using callbacks within nested queries

I am trying to add data to my database only if it doesn't already exist. While attempting this, I encountered an error message: { [Error: Cannot enqueue Query after invoking quit.] code: 'PROTOCOL_ENQUEUE_AFTER_QUIT', fatal: false } My ...

javascriptmysqlnode.jsnode-mysql

Encountering a problem with loading ajax data in jVectorMap

I'm currently facing an issue where I am unable to load data from visitors into a map created using the jvectormap plugin. This problem is really frustrating me as I can't seem to fetch the data through ajax, although it works fine when I input ...

javascriptphpjqueryajaxjvectormap

The ajax success error function does not trigger in jQuery

Hey, check out my code below: <html> <head> <script src="http://code.jquery.com/jquery-1.8.0.min.js"> </script> </head> <body> <form id="foo"> <label for="bar">A bar</label> <input id ...

javascriptajaxjquery

Create a time of 00:19:59 using JavaScript

I am attempting to display a countdown timer that starts at 20 minutes in the format (00:20:00) using setInterval. Once the countdown is finished, it should display as (00:00:00), but I am having trouble achieving this. <body onload = "onloadFunc();" ...

javascriptsetinterval

Display your StencilJs component in a separate browser window

Looking for a solution to render a chat widget created with stenciljs in a new window using window.open. When the widget icon is clicked, a new window should open displaying the current state while navigating on the website, retaining the styles and functi ...

javascriptreactjstypescriptfrontendstenciljs

By default, the HTML table will highlight the specific column based on the current month using either AngularJS or JavaScript upon loading

I am working with a table of 10 products and their monthly sales data. Using Angular JS, I am looking to highlight the entire column based on the current month and year. Additionally, we will also be incorporating future expected sales data into the table. ...

javascriptjqueryangularjs

AngularJS is patiently waiting for the tag to be loaded into the DOM

I am trying to incorporate a Google chart using an Angular directive on a webpage and I want to add an attribute to the element that is created after it has loaded. What is the most effective way to ensure that the element exists before adding the attribut ...

javascriptangularjs

JSZip on Repeat: Exploring the Possibilities!

Can JSZip be used to generate multiple zip folders and files in a loop? If so, how can this be accomplished? For example: const JSZip = require("jszip"); const saveAs = require('file-saver'); const fs = require("fs"); for(let i = 0; i < 5; ...

javascriptnode.jsloopsjszip

Trouble with comparing two datetime values in JavaScript

I have a dilemma with two different appointments: appointment1 = "2013-07-08 12:30:00" appointment2 = "2013-07-08 13:30:00" My goal in JavaScript is to compare these two appointment dates. If they don't match, I want to remove the appointment; if t ...

javascriptjquerydatetime

Erase jQuery from the text

I am struggling with splitting or removing text from a filename. For example, if I have filenames like: 200726100_50-0002.JPG 230514008_60-0001.JPG The desired result should be: 230514008_60.JPG 200726100_50.JPG Am I not using the split function cor ...

javascriptjqueryhtml

The Material UI date range picker fails to close once a selection has been made

I'm currently using the Material UI date range picker, but I've encountered an issue. After selecting the dates, the date picker does not close automatically. How can I make it close once the dates are selected? I couldn't find any specific ...

javascriptcssreactjsmaterial-ui

Creating a nested array within each parent array and transferring values in JavaScript

I'm currently facing a situation where I need to insert new array objects named "timeSeriesData" and "units" inside each parent array object, and I also have to copy the values from the parent object into the "timeSeriesData". Any assistance on this w ...

javascriptnode.jsarraysobject