Webiny-js: ValidationError: Invalid options object. Sass Loader has been initialised...

[ValiDraganescu]

This is:

• Bug

Specifications

• version: webiny --version -> 2.4.1
• OS: macOS
• Browser: Chrome (I guess any)

Expected Behavior

The code should compile and the admin app should load in the browser

Actual Behavior

Failed to compile.

./src/App.scss (/App-directory/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!/App-directory/node_modules/postcss-loader/src??postcss!/App-directory/node_modules/resolve-url-loader??ref--6-oneOf-5-3!/App-directory/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
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 'includePaths'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

Steps to Reproduce the Problem

Following the Quick Start tutorial
When I go to cd apps/admin
And I run yarn start
I get the above error

[Pavel910]

@ValiDraganescu could you please run yarn list sass-loader in the root of your project and send me the output? Thanks!

[Pavel910]

Looks like some version mismatch introduced by a dependency. Found the same issue: https://github.com/webpack-contrib/sass-loader/issues/773#issuecomment-540736137

Let me know what version you got installed and I'll try to test it with multiple versions.
Cheeers!

[Pavel910]

Quick fix

Open packages/project-utils/cra/sass.js:16 and change options: { includePaths } to options: { sassOptions: { includePaths } }.

That should fix it for your project.

Thanks for reporting, I will investigate to see which package introduced this problem in the first place.

[ValiDraganescu]

@Pavel910
Here is the yarn list output

yarn list sass-loader
yarn list v1.19.1
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
✨  Done in 1.42s.

[Pavel910]

Great, this confirms my suspicion. I'm investigating which dependency pulled in v8 instead of v7.

[ValiDraganescu]

@Pavel910 the quick fix does not work

I updated with this:

if (typeof rule === "string" && rule.includes("sass-loader")) {
            if (parent) {
                parent.splice(index, 1, {
                    loader: rule,
                    options: { sassOptions: { includePaths } }
                });
            }
            return;
        }

But I still get this

Failed to compile
./src/App.scss (/Users/validraganescu/git/kodacode/kodacode-home/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!/Users/validraganescu/git/kodacode/kodacode-home/node_modules/postcss-loader/src??postcss!/Users/validraganescu/git/kodacode/kodacode-home/node_modules/resolve-url-loader??ref--6-oneOf-5-3!/Users/validraganescu/git/kodacode/kodacode-home/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
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 'includePaths'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

[Pavel910]

@ValiDraganescu found it. I missed the second place in that same file where a tweak is required. So just paste this entire function in your file (replace the existing one):

const overrideSass = function(rules) {
    let parent = rules;
    rules.forEach((rule, index) => {
        if (typeof rule === "string" && rule.includes("sass-loader")) {
            if (parent) {
                parent.splice(index, 1, {
                    loader: rule,
                    options: { sassOptions: { includePaths } }
                });
            }
            return;
        }

        if (rule.use || rule.oneOf) {
            parent = rule.use || rule.oneOf;
        }

        if (
            isObject(rule) &&
            typeof rule.loader === "string" &&
            rule.loader.includes("sass-loader")
        ) {
            if (!rule.options.sassOptions) {
                rule.options.sassOptions = {};
            }
            rule.options.sassOptions.includePaths = includePaths;
            return;
        }

        overrideSass(rule.use || rule.oneOf || (Array.isArray(rule.loader) && rule.loader) || []);
    });
};

react-scripts introduced a change, and published it 15 hours ago - so it blew up our release right after we published our latest release :D

[Pavel910]

I've released a patch for the CLI, so new projects will have this fixed.

[ValiDraganescu]

This was fast :) I'll try the fix now, 10x mate.

[Pavel910]

@ValiDraganescu update the CLI and try to create a new project. Let me know if there are more problems 🍻

[ValiDraganescu]

It works as expected, 10x!