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

It would be great if you could add the steps that need to be taken to reproduce the problem. — Sabito
– Sabito, Commented Mar 1, 2021 at 3:17

Dorian · Accepted Answer · 2021-04-19 03:48:17Z

706

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",

edited Apr 19, 2021 at 3:48

Dorian

9,4656 gold badges52 silver badges74 bronze badges

answered Feb 7, 2021 at 11:02

D_Pain

7,2031 gold badge14 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

TitanFighter Over a year ago

v11 does not work with Vue because v11 requires Webpack v5 -> github.com/webpack-contrib/sass-loader/releases/tag/v11.0.0

Sai Teja T Over a year ago

still not working for me and I'm using vue 3

ahjashish Over a year ago

@TiletiSaiTejaReddy just try downgrading your sass-loader by changing the version in your package.json to 10.1.1 and run npm install. Try restarting the server again. Worked for me.

Peter Mortensen Over a year ago

The most copied answer on Stack Overflow with plain text (no code)...

DustInComp Over a year ago

Had the same issue with storybook-react, downgrading to sass-loader@10 fixed it

|

Peter Mortensen · Accepted Answer · 2021-05-07 22:37:25Z

102

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

edited May 7, 2021 at 22:37

Peter Mortensen

31.2k22 gold badges110 silver badges134 bronze badges

answered Feb 9, 2021 at 1:53

itacode

3,7873 gold badges23 silver badges25 bronze badges

4 Comments

natterstefan Over a year ago

Thanks for the hint, helped me to resolve my issue with Storybook and Next.js.

phil294 Over a year ago

This answer is a duplicate of the accepted one by D_Pain

Mathijs Over a year ago

Can you use webpack 5 with vue2?

itacode Over a year ago

@Mathijs Yes, you can use the official vue-cli version 5 to scaffold a project, which uses webpack 5. Or something else like vue-webpack-starter.

Freestyle09 · Accepted Answer · 2023-09-12 08:23:39Z

64

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

Sass-loader versions higher than 10th requires webpack 5

edited Sep 12, 2023 at 8:23

answered Feb 19, 2021 at 21:06

Freestyle09

5,58810 gold badges59 silver badges93 bronze badges

3 Comments

Kazu Over a year ago

i just had to remove the sas-loader folder and then run npm i sass-loader@10

phil294 Over a year ago

This answer is a duplicate of the accepted one by D_Pain

Freestyle09 Over a year ago

Did you see mentioning of nuxt and sass package in D_Pain answer? Srsly?

Daniel Ehrhardt · Accepted Answer · 2021-02-10 22:31:49Z

38

For me it helped to downgrade postcss-loader

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

answered Feb 10, 2021 at 22:31

Daniel Ehrhardt

1,06211 silver badges20 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2021-05-07 22:36:47Z

30

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.

edited May 7, 2021 at 22:36

Peter Mortensen

31.2k22 gold badges110 silver badges134 bronze badges

answered Feb 8, 2021 at 16:59

Moo Toon Developer

4175 silver badges4 bronze badges

2 Comments

Greg Over a year ago

Solved my problem in a Rails 6.0.1 app. I'm adding my comment here because the console syntax here is what you "normally" use for a recent Rails app. Thank you @D_Pain. I'm not using Vue BTW, but I must have upgraded node modules and caused a problem. Mainly Bootstrap didn't work.

phil294 Over a year ago

This answer is a duplicate of the accepted one by D_Pain

divslinger · Accepted Answer · 2021-07-01 08:15:37Z

26

style-loader v3 also dropped support for Webpack 4.

Your package.json entry should look like this:

"style-loader": "^2.0.0"

answered Jul 1, 2021 at 8:15

divslinger

3854 silver badges6 bronze badges

Comments

Mo. · Accepted Answer · 2022-03-02 13:51:11Z

24

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

"css-loader": "^5.1.1"

edited Mar 2, 2022 at 13:51

Mo.

27.7k36 gold badges167 silver badges236 bronze badges

answered Aug 20, 2021 at 3:26

DrunkOldDog

7481 gold badge5 silver badges12 bronze badges

Comments

kissu · Accepted Answer · 2022-12-04 02:05:16Z

17

This solved for me, for similar problem with Sass:

add to package.json in devDependencies: "sass-loader": "7.3.1",
npm i -D sass or yarn add sass --dev
remove node_modules
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"
  },

edited Dec 4, 2022 at 2:05

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Feb 7, 2021 at 8:21

KostDM

3151 silver badge8 bronze badges

3 Comments

charles-allen Over a year ago

You can replace npm install && yarn install with simply yarn

ijt Over a year ago

Isn't npm install enough?

phil294 Over a year ago

This answer is a duplicate of the accepted one by D_Pain

Jet Ezra · Accepted Answer · 2021-07-10 10:11:11Z

9

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",

answered Jul 10, 2021 at 10:11

Jet Ezra

1842 silver badges10 bronze badges

2 Comments

phil294 Over a year ago

This answer is a duplicate of the accepted one by D_Pain

Jet Ezra Over a year ago

Yeah, that's true, but in most cases people are confused by changes in versions, that's whay I wanted to clearly show the version that accepted answer was functioning very right

Peter Mortensen · Accepted Answer · 2022-08-17 00:46:03Z

3

The same here. Downgrading to the following versions helped:

"sass": "^1.38.0",
"sass-loader": "^10.2.0",

edited Aug 17, 2022 at 0:46

Peter Mortensen

31.2k22 gold badges110 silver badges134 bronze badges

answered Aug 19, 2021 at 14:20

Divya Dev

13510 bronze badges

1 Comment

phil294 Over a year ago

This answer is a duplicate of the accepted one by D_Pain

Peter Mortensen · Accepted Answer · 2022-08-17 00:35:47Z

We had an issue with different versions, and the below combination worked:

File: package.json

{
    "devDependencies": {

        "webpack": "^4.46.0",
        "css-loader": "^5.1.1",

        "babel-loader": "8.1.0",
        "file-loader": "^6.1.0",
        "json-loader": "^0.5.7",
        "postcss-loader": "^6.2.1",
        "raw-loader": "^4.0.1",
        "sass-loader": "^12.6.0",
        "source-map-loader": "^3.0.1",
        "style-loader": "^3.3.1",
        "svg-url-loader": "^6.0.0",
        "ts-loader": "^5.3.3",
        "url-loader": "^4.1.1"
    }
}

File: webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: "css-loader",
            }
        ]
    }
}

Peter Mortensen · Accepted Answer · 2021-09-07 23:09:14Z

1

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.

edited Sep 7, 2021 at 23:09

Peter Mortensen

31.2k22 gold badges110 silver badges134 bronze badges

answered Jul 30, 2021 at 22:48

Denmau

3793 silver badges5 bronze badges

2 Comments

phil294 Over a year ago

This answer is a duplicate of the accepted one by D_Pain

Exlord Over a year ago

not a duplicate and actually a better answer

Peter Mortensen · Accepted Answer · 2022-08-17 00:34:14Z

1

Thanks to itacode, we just need to do:

That -D means only the development environment, and you can remove it for all environments.

Yarn:

# yarn add @vue/cli@^4
yarn add -D sass
yarn add -D less
yarn add -D sass-loader@^10
yarn add -D less-loader@^7

Or npm:

# npm i @vue/cli@^4
npm i -D sass
npm i -D less
npm i -D sass-loader@^10
npm i -D less-loader@^7

edited Aug 17, 2022 at 0:34

Peter Mortensen

31.2k22 gold badges110 silver badges134 bronze badges

answered May 24, 2022 at 3:27

tanpengsccd

2,2991 gold badge14 silver badges13 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2022-08-17 00:37:07Z

1

In my case I was struggling to compile node-sass on a CentOS 7, and I solved it by removing node-sass and adding sass instead:

npm uninstall node-sass
npm install sass
npm install sass-loader^8

edited Aug 17, 2022 at 0:37

Peter Mortensen

31.2k22 gold badges110 silver badges134 bronze badges

answered Jan 17, 2022 at 15:14

inalto

1711 silver badge2 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2021-09-07 23:06:34Z

0

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 sass-loader@^10 sass

Still not working?

Delete folder node_modules

npm install

Know more

edited Sep 7, 2021 at 23:06

Peter Mortensen

31.2k22 gold badges110 silver badges134 bronze badges

answered Aug 3, 2021 at 12:29

MD SHAYON

8,12157 silver badges43 bronze badges

1 Comment

phil294 Over a year ago

This answer is a duplicate of the accepted one by D_Pain

Peter Mortensen · Accepted Answer · 2022-08-17 00:45:06Z

NPM downloads dependency packages to modules inside the module if they are in a different version than one in your package.json, but sometimes it downloads the latest version or dependent package (I don't know why) into a module...

For example, you can have sass-loader: 2.X in your package.json, and a module XXXX which also has sass-loader: * in its dependency packages (you can 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 - you’ll get an error.

A 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.

How about just removing the whole node_modules/ folder and re-install them all?

hemant rao · Accepted Answer · 2022-09-03 18:38:02Z

I have add these lines and my code working fine, Please try this and add or remove your package and version accordingly.

  "dependencies": {
    "core-js": "^3.6.5",
    "node-sass": "^7.0.1",
    "sass-resources-loader": "^2.1.0",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0",
    "node-sass": "^4.14.1",
    "prettier": "^1.19.1",
    "sass-loader": "^10.0.2",
    "vue-template-compiler": "^2.6.11"
  },

Collectives™ on Stack Overflow

TypeError: this.getOptions is not a function

17 Answers 17

10 Comments

4 Comments

3 Comments

Comments

2 Comments

Comments

Comments

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

10 Comments

4 Comments

3 Comments

Comments

2 Comments

Comments

Comments

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Linked

Related