2

I am trying to use ArcballControls.js controls inside my vue js application. This Class has functions which uses arrow syntax, and every other class in controls does not use arrow syntax. This is the only difference i could understand between other files. Below is the ArcballControls.js provided by three js

https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/ArcballControls.js

This below is the whole jsm/controls from three.js

https://github.com/mrdoob/three.js/tree/dev/examples/jsm/controls

When i try to use this controls inside my application i am getting this error.

 error  in ./node_modules/three/examples/jsm/controls/ArcballControls.js

Module parse failed: Unexpected token (238:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   //listeners
| 
>   onWindowResize = () => {
| 
|       const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;

@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!
./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!
./node_modules/cache-loader/dist/cjs.js??ref--1-0!
./node_modules/vue-loader/lib??vue-loader-options!
./src/components/Sidebar/ThreeDCanvas.vue?vue&type=script&lang=js

This is my package.json file

  "dependencies": {
    "@babel/plugin-transform-arrow-functions": "^7.16.7",
    "three": "^0.133.0",
    "vue": "^2.6.11",
    "vue-style-loader": "^4.1.2",
    "vuetify": "^2.6.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "@mdi/font": "^6.5.95",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "^3.12.1",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.2.31",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.5.3",
    "less-loader": "^5.0.0",
    "node-sass": "^7.0.1",
    "prettier-eslint": "^13.0.0",
    "sass": "^1.49.7",
    "sass-loader": "^7.3.1",
    "vue-svg-loader": "^0.12.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.46.0"
  },

Inside config/index.js, in module property, this is how i set up the babel loader, i am not sure if its the right way to do it.

  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true, // optional
            },
          },
        ],
      },

      {
        test: /\.js$/,
        exclude: /node_modules(?!\/three)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [['@babel/preset-env', { targets: 'defaults' }]],
            },
          },
        ],
      },
    ],
  },

This is my component where i initialize the threed scene

<script type="module">
import * as Three from 'three'
import ThreeScene from '@/components/Scene/ThreeScene.js'
import Renderer from '@/components/Scene/Renderer.js'
import Camera from '@/components/Scene/Camera.js'
import HLight from '@/components/Scene/HLight.js'
import DLight from '@/components/Scene/DLight.js'

//import is here
import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls.js'

import ObjectLoader from '@/components/Scene/ObjectLoader.js'
import CubeLoader from '@/components/Scene/CubeLoader.js'

export default {
  name: 'ThreeDCanvas',
  data() {
    return {}
  },
  methods: {
    init() {
      this.scene = new ThreeScene()
      this.camera = new Camera()
      this.renderer = new Renderer({ antialias: true })
      this.objectLoader = new ObjectLoader()
      this.controls = new ArcballControls(
        this.camera,
        this.renderer.domElement,
        this.scene
      )

Could some one help me to find what i am doing wrong here ?

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
solomyhansolo
  • 107
  • 2
  • 9
  • 1
    Have you tried the [solution in this answer](https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b)? – M - Apr 04 '22 at 18:13

1 Answers1

1

Inside the file config/index.js on module added babel loader.

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: ['babel-loader']
},

in package.json removed unnecessary dependencies and downgraded some. Node version i am using is 14.17.4 and because of that, node-sass had to downgrade to 4.14.1, after the issue with loader for threejs was fixed, i had issues with sass loader.

"node-sass": "^4.14.1",
"prettier-eslint": "^13.0.0",
"sass": "^1.49.7",
"sass-loader": "^7.3.1",
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",

i removed babel-loader and babel-preset-es2015 from package.json.

This is my babel-config.js

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

When i made these changes i am able to access the arcballcontrol from threejs.

solomyhansolo
  • 107
  • 2
  • 9