TypeError: Class constructor EventDispatcher cannot be invoked without 'new'

[QJvic]

TypeError: Class constructor EventDispatcher cannot be invoked without 'new'
with three.js version 0.128.0

[DreamfulWong]

+1

[StudioRATATA]

+1

[Yurbly]

Same issue. Have a suspicion that it is connected to parcel. Do you use it?

TypeError: Class constructor EventDispatcher cannot be invoked without 'new'
with three.js version 0.128.0

[supjs]

+1

[cheneyhuwawadi]

+1

[Zaniyar]

same

[peteradamsdev]

I ran into this issue trying to use three.interaction in Vite.js. My solution was to download the repository and include it directly instead of importing it from node_modules.

Change
import { Interaction } from "three.interaction";
to
import { Interaction } from "../path-to-downloaded-directory/Interaction/src/index.js";

There may be a better way, but this worked for me.

[nartallax]

This problem is caused by an inconsistency of three.js and three.interaction.js : three.js is distributed with classes declared as class Whatever {} (ES6 way), but distributed version of three.interaction.js is trying to subclass of these classes as superclassConstructor.call(this) (pre-ES6 way).

These two ways of class declaration does not get along well (therefore, an error), so the solution is to match ES versions of distributed code. For that, you may either upgrade distributed version of three.interaction.js (peteradamsdev's solution), or downgrade version of three.js with something like Babell (I failed to do so).

Note that I'm not talking about version of the libraries; I'm talking about what javascript versions libraries' distributions conform to.

Three.js devs claim that official distribution is in ES5, but it's not. Maybe something changed in the last two years.

After all this said, for me the optimal solution was to take the source code of three.interaction.js, use rollup tool to bundle it in single file, then use uglify-js tool to minify the file, then edit file slightly to make it work exactly as distributed (export into THREE and not into separate object); and the resulting file was in ES6.

[michelesalvador]

@nartallax excellent explanation.
Could you please share here the file you produced?

[nartallax]

Sure:
three.interaction.js.zip

[AprildreamMI]

Sure: three.interaction.js.zip

想要在vue中使用这个自定义版本需要这样做

1. 下载压缩包中的库
2. 引用库

import * as THREE from 'three'
// 事件点击库
import '@/utils/three.interaction.js'

3. 给THREE添加全局变量

const webpack = require('webpack')
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'vue three'
        return args
      })
      .end()
      .plugin('provide')
      .use(webpack.ProvidePlugin, [{
       // 定义THREE为全局变量
        THREE: 'three'
      }])
      .end()
  }
}

4. 使用库

const interaction = new THREE.Interaction(renderer, scene, camera)

[sasial-dev]

Does anyone have a fork of three.interaction on npm that does this?

[b3rz3rkr]

Have similar issue when trying to use module in browser.
Fixed with copying to my project directory connected to index.js in src directory and changed all paths to "path" + ".js", also fixed paths to three.js module. Not the best solution, but it works.
I think in most cases we got this error after babel or other compiler.

Uncaught (in promise) TypeError: class constructors must be invoked with 'new'
InteractionManager three.interaction.module.js:711
Interaction three.interaction.module.js:4466
three.interaction.module.js:711:12

[juanboschero]

Having the same issue, 'Uncaught TypeError: Class constructor EventDispatcher cannot be invoked without 'new' '.

Using react.js

Please help

[elemermelada]

Having the same issue, 'Uncaught TypeError: Class constructor EventDispatcher cannot be invoked without 'new' '.

Using react.js

Please help

I speak on behalf of this guy as well. This other guy literally saved our project:

I ran into this issue trying to use three.interaction in Vite.js. My solution was to download the repository and include it directly instead of importing it from node_modules.

Change import { Interaction } from "three.interaction"; to import { Interaction } from "../path-to-downloaded-directory/Interaction/src/index.js";

There may be a better way, but this worked for me.

Thank you so much!