TypeError: this.getOptions is not a function

Question

I am facing a weird error when I installed Bootstrap. The error is below. I tried uninstalling less-loader and installing [email protected], because I saw it online, but it did nothing. I am unsure what to do at this step.

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

 @ ./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

Answer 1

Similar to what @KostDM said, in my case it seems like [email protected] doesn't work with [email protected].

I installed [email protected] and it worked like a charm again.

In your package.json:

"sass-loader": "^10",

Answer 2

I had the same problem resolved by downgrading sass-loader to 10.1.1. I am using @vue/cli 4.5.8 that includes [email protected].

From v11.0.0 of sass-loader and v8.0.0 of less-loader, the

minimum supported webpack version is 5

• sass-loader v11.0.0 release notes
• less-loader v8.0.0 release notes

Answer 3

For me it helped to downgrade postcss-loader

+ "postcss-loader": "^4.2.0",
- "postcss-loader": "^5.0.0",

Answer 4

Yesterday I found a problem after upgrading sass-loader to the latest version.

If using yarn, you can downgrade sass-loader. Use yarn add sass-loader@^10.1.1 it work.

Answer 5

Downgrading the sass-loader to ^10.0.0 worked for me, but on a fresh Nuxt.js CLI application I had to also install Sass with:

npm i sass

To downgrade, you can remove the node_modules folder and to add, run this in your terminal:

npm i sass-loader@10 

This will install the newest 10 version of sass-loader.

And after all, again install all dependencies:

npm i

Answer 6

This solved for me, for similar problem with Sass:

1. add to package.json in devDependencies: "sass-loader": "7.3.1",
2. npm i -D sass or yarn add sass --dev
3. remove node_modules
4. npm install or yarn depending on your package manager

My configuration:

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.32.6",
    "sass-loader": "7.3.1",
    "vue-template-compiler": "^2.6.11"
  },

Answer 7

style-loader v3 also dropped support for Webpack 4.

Your package.json entry should look like this:

"style-loader": "^2.0.0"

Answer 8

Ran yarn remove sass-loader

And then installed specifically version 10 as yarn add sass-loader@10. This totally solved the issue in "vue": "~2.6.12",

Answer 9

The command yarn add sass-loader install version 11, which happens not to be compatible with Webpack version 4 and below. The current Vue CLI V4 uses Webpack v4. You will have to wait util Vue CLI V5(will use Webpack 5) is released (currently in Beta) in order to use sass-loader v12. Alternatively, you can update to Webpack 5, but be sure to read the CHANGELOG

Answer 10

When using webpack version 4, the default in Vue CLI 4, you need to make sure your loaders are compatible with it. Otherwise you will get errors about confliciting peer dependencies. In this case you can use an older version of the loader that is still compatible with webpack 4.

# Sass
npm install -D sass-loader@^10 sass

still not working? Delete node_modules

npm install

know more