vue-cli and sass-loader@8 incompatibility

[jacekkarczmarczyk]

Version

4.0.0-rc.0

Reproduction link

https://github.com/jacekkarczmarczyk/vue-cli-sass-loader-repro

Environment info

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-4700HQ CPU @ 2.40GHz
  Binaries:
    Node: 12.6.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Users\Jacek\AppData\Roaming\npm\yarn.CMD
    npm: 6.10.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.11.0
    @vue/babel-preset-jsx:  1.1.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  3.11.0
    @vue/cli-plugin-babel: ^3.2.0 => 3.11.0
    @vue/cli-plugin-eslint: ^3.2.0 => 3.11.0
    @vue/cli-plugin-typescript: ^3.2.0 => 3.11.0
    @vue/cli-service: ^3.2.0 => 3.11.0
    @vue/cli-shared-utils:  3.11.0
    @vue/component-compiler-utils:  3.0.0
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0
    @vue/eslint-config-typescript: ^4.0.0 => 4.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    eslint-plugin-vuetify: ^1.0.0-beta.1 => 1.0.0-beta.3
    typescript: ~3.5.0 => 3.5.3
    vue: ^2.5.21 => 2.6.10
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Clone the repo and run yarn && yarn build

What is expected?

Successfull build

What is actually happening?

$ vue-cli-service build

-  Building for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 ERROR  Failed to compile with 1 errors22:27:09

 error  in ./src/App.vue?vue&type=style&index=0&lang=sass&

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (C:\cygwin64\home\Jacek\karpc\repro\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11)
    at Object.loader (C:\cygwin64\home\Jacek\karpc\repro\node_modules\sass-loader\dist\index.js:36:28)
    at C:\cygwin64\home\Jacek\karpc\repro\node_modules\webpack\lib\NormalModule.js:313:20
    at C:\cygwin64\home\Jacek\karpc\repro\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\cygwin64\home\Jacek\karpc\repro\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at runSyncOrAsync (C:\cygwin64\home\Jacek\karpc\repro\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (C:\cygwin64\home\Jacek\karpc\repro\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at iterateNormalLoaders (C:\cygwin64\home\Jacek\karpc\repro\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at C:\cygwin64\home\Jacek\karpc\repro\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at context.callback (C:\cygwin64\home\Jacek\karpc\repro\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\cygwin64\home\Jacek\karpc\repro\node_modules\cache-loader\dist\index.js:118:7
    at C:\cygwin64\home\Jacek\karpc\repro\node_modules\graceful-fs\graceful-fs.js:57:14
    at FSReqCallback.oncomplete (fs.js:153:23)

 @ ./src/App.vue?vue&type=style&index=0&lang=sass& 1:0-480 1:496-499 1:501-978 1:501-978
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi ./src/main.ts

---

Error goes off when you remove <style> section from App.vue

It also worked when I removed

defaultSassLoaderOptions.fiber = require('fibers')

in https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/css.js#L21 and changed

indentedSyntax: true

to

sassOptions: { 
  indentedSyntax: true 
}

in https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/css.js#L181

[bromix]

Same problem here. My output of the log looks the same.

[LinusBorg]

For the record, we install ^7.0.0 explicitly, so this won't affect users unless they actively choose to do a major version bump of this dependency.

[jacekkarczmarczyk]

You're absolutely right, but maybe it's worth to make 4.0 compatible with new sass loader? Since the stable version is not released yet, so it's the last moment to update it as I guess otherwise we will have to wait for vue-cli 5?
Of course this seems to be breaking change which you may not want to add since the RC version is already released

[SavkaTaras]

I had issue with 'data' in sassLoader. Apparently they renamed it to 'prependData' and did some changes, so you would have to look into their documentation or read the output. I use Node, not Yarn.

[jacquesmatthieu]

I've got the same problem what's the solution ? I can't build Vuetify module in my project ...

 error  in ./packages/app/node_modules/vuetify/src/components/VSubheader/VSubheader.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (myproject/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:49:11)
    at Object.loader (myproject/node_modules/sass-loader/dist/index.js:36:28)

 @ ./packages/app/node_modules/vuetify/src/components/VSubheader/VSubheader.sass 4:14-272 14:3-18:5 15:22-280
 @ ./packages/app/node_modules/vuetify/lib/components/VSubheader/VSubheader.js
 @ ./packages/app/node_modules/vuetify/lib/components/VSubheader/index.js
 @ ./packages/app/node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./packages/app/node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./packages/app/node_modules/vuetify/lib/components/VSelect/index.js
 @ ./packages/app/node_modules/vuetify/lib/components/index.js
 @ ./packages/app/node_modules/vuetify/lib/index.js
 @ ./packages/app/src/main.js
 @ multi (webpack)-dev-server/client?http://172.20.10.2:8080/sockjs-node (webpack)/hot/dev-server.js ./packages/app/src/main.js

[SavkaTaras]

error in ./packages/app/node_modules/vuetify/src/components/VSubheader/VSubheader.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

• options has an unknown property 'indentedSyntax'. These properties are valid:
  object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
  at validate (myproject/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:49:11)
  at Object.loader (myproject/node_modules/sass-loader/dist/index.js:36:28)

@ ./packages/app/node_modules/vuetify/src/components/VSubheader/VSubheader.sass 4:14-272 14:3-18:5 15:22-280
@ ./packages/app/node_modules/vuetify/lib/components/VSubheader/VSubheader.js
@ ./packages/app/node_modules/vuetify/lib/components/VSubheader/index.js
@ ./packages/app/node_modules/vuetify/lib/components/VSelect/VSelectList.js
@ ./packages/app/node_modules/vuetify/lib/components/VSelect/VSelect.js
@ ./packages/app/node_modules/vuetify/lib/components/VSelect/index.js
@ ./packages/app/node_modules/vuetify/lib/components/index.js
@ ./packages/app/node_modules/vuetify/lib/index.js
@ ./packages/app/src/main.js
@ multi (webpack)-dev-server/client?http://172.20.10.2:8080/sockjs-node (webpack)/hot/dev-server.js ./packages/app/src/main.js

Would you mind sharing the project repo? I am interested what is happening there. Seems like 8.0.0 sass loader broke a lot of projects.

[LinusBorg]

I've got the same problem what's the solution ? I can't build Vuetify module in my project ...

@jacquesmatthieu have you tried following the description in the OP? If you find problems along the way, ask more specifically.

Or simply use sass-loader v7, which is the version we installed for you initially, and which is the version we support right now.

[jacquesmatthieu]

@SavkaTaras I can't share the repo sorry. @LinusBorg I've got downgrade to sass-loader and it works. Thx you !

[ryanjwilke]

Having the same issue:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/Users/ryanwilke/Sites/portfolio/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:49:11)
    at Object.loader (/Users/ryanwilke/Sites/portfolio/node_modules/sass-loader/dist/index.js:36:28)

 @ ./src/assets/styles/main.sass 4:14-233 14:3-18:5 15:22-241
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.188.223.230:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I upgraded to 4.0 cause I thought I read that would fix it, but apparently that's not the case.

[AlexLazareva]

I have removed also row:

fiber: require('fibers'),

from file webpack.config.js in sass-loader
{ test: /\.s(c|a)ss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { implementation: require('sass'), sassOptions: { indentedSyntax: true } } } ] }
And webpack started to work