TypeError: this.getOptions is not a function – Code Example

If you are using less-loader v8.0.0 or sass-loader v11.0.0 along with webpack version <5 then you will encounter “TypeError: this.getOptions is not a function” error.

This is because from v8 in less-loader and v11 in sass-loader, there is a breaking change. They support webpack v5.

For apps created in Vuejs and reactjs we need to make sure that the right version of less or sass must be installed with webpack.

You will get this kind of error in reactjs –

Failed to compile
./node_modules/rsuite/lib/styles/themes/default/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./node_modules/file-loader/dist/cjs.js??ref--6-oneOf-8!./node_modules/rsuite/lib/styles/themes/default/index.less)
TypeError: this.getOptions is not a function

and in vuejs –

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss 4:14-419 14:3-18:5 15:22-427
 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.182:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Syntax Error: TypeError: this.getOptions is not a function

Solution

The solution to this problem is to either downgrade sass-loader & less-loader or upgrade webpack to v5+.

Downgrading sass-loader from package.json file –

"sass-loader": "^10",

Downgrading less-loader from package.json file –

"less-loader": "7.3.0",

The better solution is to upgrade your libraries. Delete node_modules folder and run npm install.

Conclusion

Due to breaking changes in webpack v5, many libraries which are dependent on it raised TypeError: this.getOptions is not a function error.

If you are using older version of webpack (<v5) in your react or vuejs application but somehow packages like sass-loader, less-loader, css-loader, style-loader etc. got updated then they might have dependency on webpack v5. This will raise typeerror.