Syntax Error: TypeError: this.getOptions is not a function

less is a great css preprocessor which can be converted to css stylesheet. But using latest version of less with Vue 2.x version has some problems.

ERROR Failed to compile with 1 error 上午11:51:16

error in ./src/components/ChooseDistributors.vue?vue&type=style&index=0&id=0bd67dd3&lang=less&scoped=true&

Syntax Error: TypeError: this.getOptions is not a function

@ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ChooseDistributors.vue?vue&type=style&index=0&id=0bd67dd3&lang=less&scoped=true& 4:14-476 15:3-20:5 16:22-484
@ ./src/components/ChooseDistributors.vue?vue&type=style&index=0&id=0bd67dd3&lang=less&scoped=true&
@ ./src/components/ChooseDistributors.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.15:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Above error is shown when building when running npm run build.

Current vue version is 2.6.11, less version is 4.1.1 and less-loader is 8.1.0.

Solution

Changing less-loader version to 7.3.0 fixed this issue.

"devDependencies": {
    "less": "^4.1.1",
    "less-loader": "7.3.0"
  }

The post Syntax Error: TypeError: this.getOptions is not a function appeared first on Redino blog.