Issue when upgrading sass-loader to 8.x

[kinow]

Hi,

We recently upgraded our libraries with ncu -u but got an error that first appeared to be caused by sass-loader.

ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

Then, vue inspect | less and searching for "sass" revealed the origin of the issue.

Looks like the data in the sass options of vuetify-loader is not supported for sass-loader-8.x, at least according to their changelog.

Not entirely sure if that's the correct file. My issue was to upgrade Vuetify to 2.1 from 2.0. I tried slipping in some extra updates, but simply reverted sass-loader for now as that's not required for us.

But just in case other users may have a similar issue, or if some developer of vuetify-loader could check if the issue with data being removed from sass-loader options could indeed be the origin of the problem, please.

Thank you!
Bruno

[kinow]

Thankfully Travis CI had a copy of an old commit that failed too, here's the complete exception: https://travis-ci.org/cylc/cylc-ui/jobs/596393204 (will disappear eventually as we get more builds in our project)

But here's a part of the exception

 ERROR  Failed to compile with 100 errors                             1:53:21 AM
 error  in ./node_modules/vuetify/src/components/VTabs/VTabs.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 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/home/travis/build/cylc/cylc-ui/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11)
    at Object.loader (/home/travis/build/cylc/cylc-ui/node_modules/sass-loader/dist/index.js:36:28)
    at runLoaders (/home/travis/build/cylc/cylc-ui/node_modules/webpack/lib/NormalModule.js:316:20)
    at /home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/travis/build/cylc/cylc-ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at provider (/home/travis/build/cylc/cylc-ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9)
    at /home/travis/build/cylc/cylc-ui/node_modules/graceful-fs/graceful-fs.js:115:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
 @ ./node_modules/vuetify/lib/components/VTabs/VTabs.js 2:0-50
 @ ./node_modules/vuetify/lib/components/VTabs/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/plugins/vuetify.js
 @ ./src/main.js
 @ multi ./src/main.js
 error  in ./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.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 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/home/travis/build/cylc/cylc-ui/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11)
    at Object.loader (/home/travis/build/cylc/cylc-ui/node_modules/sass-loader/dist/index.js:36:28)
    at runLoaders (/home/travis/build/cylc/cylc-ui/node_modules/webpack/lib/NormalModule.js:316:20)
    at /home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/travis/build/cylc/cylc-ui/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/travis/build/cylc/cylc-ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at provider (/home/travis/build/cylc/cylc-ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9)
    at /home/travis/build/cylc/cylc-ui/node_modules/graceful-fs/graceful-fs.js:115:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
 @ ./node_modules/vuetify/lib/components/VCalendar/mixins/calendar-with-events.js 2:0-79
 @ ./node_modules/vuetify/lib/components/VCalendar/VCalendar.js
 @ ./node_modules/vuetify/lib/components/VCalendar/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/plugins/vuetify.js
 @ ./src/main.js
 @ multi ./src/main.js
 error  in ./node_modules/vuetify/src/styles/main.sass

...

[KaelWD]

Duplicate of vuejs/vue-cli#4513

The file you linked is our development environment, it does not affect your own build.

[kinow]

Oh, sorry. Thanks for the link and explanation @KaelWD !