Material-components-web: options has an unknown property 'importer'.

[broros]

material-components-web/docs/getting-started.md

ERROR in ./app.scss
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 'importer'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/Volumes/Backup/material-design-web/node_modules/schema-utils/dist/validate.js:50:11)
    at Object.loader (/Volumes/Backup/material-design-web/node_modules/sass-loader/dist/index.js:36:28)
 @ multi ./app.scss ./app.js main[0]

webpack.config.js

const autoprefixer = require("autoprefixer");

const path = require("path");

function tryResolve_(url, sourceFilename) {
  // Put require.resolve in a try/catch to avoid node-sass failing with cryptic libsass errors
  // when the importer throws
  try {
    return require.resolve(url, { paths: [path.dirname(sourceFilename)] });
  } catch (e) {
    return "";
  }
}

function tryResolveScss(url, sourceFilename) {
  // Support omission of .scss and leading _
  const normalizedUrl = url.endsWith(".scss") ? url : `${url}.scss`;
  return (
    tryResolve_(normalizedUrl, sourceFilename) ||
    tryResolve_(
      path.join(
        path.dirname(normalizedUrl),
        `_${path.basename(normalizedUrl)}`
      ),
      sourceFilename
    )
  );
}

function materialImporter(url, prev) {
  if (url.startsWith("@material")) {
    const resolved = tryResolveScss(url, prev);
    return { file: resolved || url };
  }
  return { file: url };
}

module.exports = {
  entry: ["./app.scss", "./app.js"],
  output: {
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "bundle.css"
            }
          },
          { loader: "extract-loader" },
          { loader: "css-loader" },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [autoprefixer()]
            }
          },
          {
            loader: "sass-loader",
            options: {
              importer: materialImporter 
            }
          }
        ]
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        query: {
          presets: ["@babel/preset-env"]
        }
      }
    ]
  }
};

[broros]

fixed

[honsa]

how?

[sisconda]

It looks like the issue is that sass-loader 8.x.x no longer uses the importer option. You can fix this error by running:
npm uninstall sass-loader--save npm install [email protected] --save

However doing this will result in errors in your app.scss where you'll have to switch from the @use to @import, so I'm not sure if following the directions in the appendix are worth it.