TypeError: this.getOptions is not a function

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
Updated 2021-05-07 20:18:41Z by Peter Mortensen
Updated 2021-02-06 21:58:06Z by Juliette

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",
Updated 2021-04-19 03:48:17Z by Dorian
Updated 2021-02-07 11:02:43Z by D_Pain

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

Updated 2021-05-07 22:37:25Z by Peter Mortensen
Updated 2021-02-09 01:53:55Z by itacode

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 [email protected] 

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

And after all, again install all dependencies:

npm i

EDIT

Sass-loader versions higher than 10 requires webpack 5

Updated 2021-09-21 13:51:23Z by
Updated 2021-02-19 21:06:53Z by Freestyle09

For me it helped to downgrade postcss-loader

+ "postcss-loader": "^4.2.0",
- "postcss-loader": "^5.0.0",
Updated 2021-02-10 22:31:49Z by Daniel Ehrhardt

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

If using yarn, you can downgrade sass-loader. Use yarn add [email protected]^10.1.1 it work.

Updated 2021-05-07 22:36:47Z by Peter Mortensen
Updated 2021-02-08 16:59:55Z by Nuttapong Sarkana

style-loader v3 also dropped support for Webpack 4.

Your package.json entry should look like this:

"style-loader": "^2.0.0"

Updated 2021-07-01 08:15:37Z by divslinger

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"
  },
Updated 2021-06-15 23:33:13Z by Balanced02
Updated 2021-02-07 08:21:51Z by KostDM

I had the same problem here with css-loader v6. Downgrading to v5 seems to work:

"css-loader": "^5.1.1"

Updated 2021-09-10 04:49:32Z by Peter Mortensen
Updated 2021-08-20 03:26:42Z by juanireyes

Ran yarn remove sass-loader

And then installed specifically version 10 as yarn add [email protected]. This totally solved the issue in "vue": "~2.6.12",

Updated 2021-07-10 10:11:11Z by Jet Ezra

NPM downloads dependency packages to modules inside the module if they are in different version then one in your package.json but sometimes it downloads latest version od dependant package (dunno why) into a module..

for example you can have sass-loader: 2.X in your package.json, and a module XXXX wich also has sass-loader: * in its dependency packages (you cn check that in package.json inside that XXXX module) npm will download sass-loader 2.X for you, and sass-loader: 3.X for the XXXX package - youl get an error.

Quick fix is to remove that additional package from XXXX/node_modules You can also check what package version the XXXX module use and try to use the same version in your project.

In my case [email protected] with project.json:

  "dependencies": {
    "css-loader": "*",
    "sass-loader": "*",
    "style-loader": "*"
  },

downloaded sass-loader: 3.0.0

while npm downloaded sass-loader: 2.0.0 according to project.json in my project:

"style-loader": "2.0.0"

I removed node_modules/font-awesome-sass-loader/node_modules/ and it fixed the problem.

Updated 2022-01-14 09:18:16Z by Berci
Updated 2021-11-19 11:21:25Z by zajcev

Same here. Downgrading to the following versions helped: "sass": "^1.38.0", "sass-loader": "^10.2.0",

Updated 2021-08-19 14:20:59Z by Divya Dev

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 conflicting 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 [email protected]^10 sass

Still not working?

Delete folder node_modules

npm install

Know more

Updated 2021-09-07 23:06:34Z by Peter Mortensen
Updated 2021-08-03 12:29:27Z by MD SHAYON

The command yarn add sass-loader installs 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 until 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.

Updated 2021-09-07 23:09:14Z by Peter Mortensen
Updated 2021-07-30 22:48:09Z by Denmau