Module parse failed, need an appropriate loader to handle this file type while using Arcballcontrols

I am trying to use the arcballcontrols into my 3dscene but i am facing this issue.

As the error message suggests, I guess you need to configure an appropriate loader that can handle jsm module format. In my own projects I configured Webpack to use babel-loader. Maybe this helps:

I have only issue with the arcballcontrols.js from jsm, orbitcontrols works fine for me from same nodemodules.

the difference i see from orbitcontrols and arcballcontrols are the functions for orbitcontrols are inside the constructors and arcballcontrols functions are outside the constructors.

I am bruteforcing my way to make it work, so if things i mentioned just now doesnt make sense sorry.

I can’t reproduce it with my Webpack setup. ArcballControls can be loaded and is defined.

import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls';


/* Output ->
class ArcballControls extends three__WEBPACK_IMPORTED_MODULE_0__.EventDispatcher {

    constructor( camera, domElement, scene = null ) {

        super(); = null;
        this.domElement = domElement;

The issue is that it’s using an arrow function as a class method. You need to use the appropriate Babel plugin in order to get it to compile.

This link should hopefully be enough info to install the plugin ( you can use babel preset-env like in their example as it contains the transform-arrow-functions plugin ). Be careful with the exclude parameter, as in their examples it excludes node-modules which is where you’re getting arcball controls from.

  module: {
    rules: [
        test: /\.(js|jsm)$/,
        include: path.resolve(__dirname, 'node_modules/three'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'defaults' }]],

this is my config file, i have added the include options also. But it doesnot work, i think i have done something wrong try to use the babel-loader. My knowledge is very less in this topic.

  "dependencies": {
    "babel-loader": "^8.2.4"

  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11"

This is version of babel loader i am using.

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],

This is babel.config.js

I am still getting the same error. :frowning: