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

Questions
,
1

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

image
image1118×422 35.8 KB

2

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:

3

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.

4

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

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

console.log(ArcballControls);

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

    constructor( camera, domElement, scene = null ) {

        super();
        this.camera = null;
        this.domElement = domElement;
        th…
 */
5

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.

6 
  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: