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 less-loader@5.0.0, 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 stands with Ukraine, Mar 01 '21 at 03:17

score 698 · Accepted Answer · edited Apr 19 '21 at 03:48

698

Similar to what @KostDM said, in my case it seems like sass-loader@11.0.0 doesn't work with vue@2.6.12.

I installed sass-loader@10.1.1 and it worked like a charm again.

In your package.json:

"sass-loader": "^10",

edited Apr 19 '21 at 03:48

Dorian

7,749
4
38
57

answered Feb 07 '21 at 11:02

D_Pain

7,123
1
11
12

94

v11 does not work with Vue because v11 requires Webpack v5 -> https://github.com/webpack-contrib/sass-loader/releases/tag/v11.0.0 – TitanFighter Feb 09 '21 at 19:22
22

still not working for me and I'm using vue 3 – Sai Teja T Feb 20 '21 at 07:28
4

@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. – ahjashish Apr 05 '21 at 16:32
I got the same error for exports-loader because that one requires Webpackv5 as well. I fixed this by downgrading to exports-loader@1.1.1 – Dylan P Apr 19 '21 at 00:45
15

[The most copied answer on Stack Overflow with plain text](https://stackoverflow.blog/2021/04/19/how-often-do-people-actually-copy-and-paste-from-stack-overflow-now-we-know/) (no code)... – Peter Mortensen Apr 21 '21 at 16:44
with yarn `yarn add --dev 'sass-loader@<11'` – Danilo Gómez May 25 '21 at 12:15
I was actually having issue with storybook, and downgrading `sass-loader` to `^10` did the trick for me. – Paulo Griiettner Jun 24 '21 at 10:58
As here: https://stackoverflow.com/questions/70281346/node-js-sass-version-7-0-0-is-incompatible-with-4-0-0-5-0-0-6-0-0 you can remove node-sass and install sass if you are using new versions of vue. Work like a charm. – Fausto T. Toloi Mar 02 '22 at 05:50
Had the same issue with storybook-react, downgrading to sass-loader@10 fixed it – DustInComp Aug 29 '22 at 14:22
The Nuxt document is all you need to pay attention to: https://nuxtjs.org/docs/directory-structure/assets/#sass – Mohammadreza Abdoli Apr 03 '23 at 09:11

score 102 · Answer 2 · edited May 07 '21 at 22:37

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 webpack@4.46.0.

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

minimum supported webpack version is 5

edited May 07 '21 at 22:37

Peter Mortensen

30,738
21
105
131

answered Feb 09 '21 at 01:53

itacode

3,721
3
21
23

4

Thanks for the hint, helped me to resolve my issue with Storybook and Next.js. – natterstefan Mar 16 '21 at 20:49
1

This answer is a duplicate of the accepted one by D_Pain – phil294 Aug 31 '21 at 12:50
Can you use webpack 5 with vue2? – Mathijs Apr 22 '22 at 09:29
@Mathijs Yes, you can use the official [vue-cli](https://cli.vuejs.org/) version 5 to scaffold a project, which uses webpack 5. Or something else like [vue-webpack-starter](https://github.com/itacode/vue-webpack-starter). – itacode Apr 24 '22 at 00:26

score 62 · Answer 3 · edited Mar 18 '23 at 23:20

62

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 10 requires webpack 5

edited Mar 18 '23 at 23:20

ggorlen

44,755
7
76
106

answered Feb 19 '21 at 21:06

Freestyle09

4,894
8
52
83

1

i just had to remove the sas-loader folder and then run npm i sass-loader@10 – Kazu Mar 09 '21 at 07:49
This answer is a duplicate of the accepted one by D_Pain – phil294 Aug 31 '21 at 12:51
Did you see mentioning of nuxt and sass package in D_Pain answer? Srsly? – Freestyle09 Sep 01 '21 at 07:48

score 38 · Answer 4 · answered Feb 10 '21 at 22:31

38

For me it helped to downgrade postcss-loader

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

answered Feb 10 '21 at 22:31

Daniel Ehrhardt

908
7
16

score 30 · Answer 5 · edited May 07 '21 at 22:36

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 07 '21 at 22:36

Peter Mortensen

30,738
21
105
131

answered Feb 08 '21 at 16:59

Nuttapong Sarkana

417
5
3

1

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. – Greg Mar 11 '21 at 20:01
1

This answer is a duplicate of the accepted one by D_Pain – phil294 Aug 31 '21 at 12:50

score 26 · Answer 6 · answered Jul 01 '21 at 08:15

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 01 '21 at 08:15

divslinger

385
4
5

score 24 · Answer 7 · edited Mar 02 '22 at 13:51

24

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

"css-loader": "^5.1.1"

edited Mar 02 '22 at 13:51

Mo.

26,306
36
159
225

answered Aug 20 '21 at 03:26

DrunkOldDog

718
5
12

score 16 · Answer 8 · edited Dec 04 '22 at 02:05

16

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 04 '22 at 02:05

kissu

40,416
14
65
133

answered Feb 07 '21 at 08:21

KostDM

305
1
8

1

You can replace `npm install && yarn install` with simply `yarn` – charles-allen Feb 11 '21 at 03:37
2

Isn't npm install enough? – ijt Mar 03 '21 at 03:22
This answer is a duplicate of the accepted one by D_Pain – phil294 Aug 31 '21 at 12:51

score 8 · Answer 9 · answered Jul 10 '21 at 10:11

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

answered Jul 10 '21 at 10:11

Jet Ezra

164
2
9

This answer is a duplicate of the accepted one by D_Pain – phil294 Aug 31 '21 at 12:51
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 – Jet Ezra Sep 07 '21 at 11:39

score 2 · Answer 10 · edited Aug 17 '22 at 00:46

2

The same here. Downgrading to the following versions helped:

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

edited Aug 17 '22 at 00:46

Peter Mortensen

30,738
21
105
131

answered Aug 19 '21 at 14:20

Divya Dev

125
9

2

This answer is a duplicate of the accepted one by D_Pain – phil294 Aug 31 '21 at 12:52

score 1 · Answer 11 · edited Sep 07 '21 at 23:09

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 07 '21 at 23:09

Peter Mortensen

30,738
21
105
131

answered Jul 30 '21 at 22:48

Denmau

231
2
5

This answer is a duplicate of the accepted one by D_Pain – phil294 Aug 31 '21 at 12:51
not a duplicate and actually a better answer – Exlord Mar 06 '22 at 09:23

score 1 · Answer 12 · edited Aug 17 '22 at 00:37

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 '22 at 00:37

Peter Mortensen

30,738
21
105
131

answered Jan 17 '22 at 15:14

inalto

161
1
2

score 1 · Answer 13 · edited Aug 17 '22 at 00:35

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

score 1 · Answer 14 · edited Aug 17 '22 at 00:34

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 '22 at 00:34

Peter Mortensen

30,738
21
105
131

answered May 24 '22 at 03:27

leonardosccd

1,503
11
12

score 0 · Answer 15 · edited Sep 07 '21 at 23:06

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 07 '21 at 23:06

Peter Mortensen

30,738
21
105
131

answered Aug 03 '21 at 12:29

MD SHAYON

7,001
45
38

1

This answer is a duplicate of the accepted one by D_Pain – phil294 Aug 31 '21 at 12:52

score 0 · Answer 16 · edited Aug 17 '22 at 00:45

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 font-awesome-sass-loader@2.0.1 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? — kevinluo201, Nov 19 '21 at 14:58

score 0 · Answer 17 · answered Sep 03 '22 at 18:38

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

TypeError: this.getOptions is not a function

17 Answers17

Linked