Next.js: useSass next.config.js "toString is undefined"

[cloudsociety]

Question about Next.js

I've looked everywhere for a solution to this, but haven't found anything yet.

Recently upgraded a project to Next9.2, but can't get it to start. I keep getting this error:

TypeError: Cannot read property 'toString' of undefined
    at config.module.rules.forEach.rule (/Users/dave/Sites/myproject/packages/web/next.config.js:11:21)
    at Array.forEach (<anonymous>)
    at Object.webpack (/Users/dave/Sites/myproject/packages/web/next.config.js:10:25)
    at Object.webpack (/Users/dave/Sites/myproject/packages/web/node_modules/@zeit/next-sass/index.js:47:27)
    at getBaseWebpackConfig (/Users/dave/Sites/myproject/packages/web/node_modules/next/dist/build/webpack-config.js:82:2465)
error Command failed with exit code 1.

I'm using the setup from (https://dev.to/vladymyrpylypchatin/the-simple-way-to-use-scoped-and-global-scss-in-next-js-3epa), which was working perfectly until the update.

My next.config.js file matches that article (with a couple linting comments):

/* eslint-disable @typescript-eslint/no-var-requires */
const withSass = require("@zeit/next-sass");
// eslint-disable-next-line no-undef
module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 2
  },
  webpack: config => {
    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes(".scss")) {
        rule.rules = rule.use.map(useRule => {
          if (typeof useRule === "string") {
            return { loader: useRule };
          }
          if (useRule.loader === "css-loader") {
            return {
              oneOf: [
                {
                  test: new RegExp(".global.scss$"),
                  loader: useRule.loader,
                  options: {}
                },
                {
                  loader: useRule.loader,
                  options: { modules: true }
                }
              ]
            };
          }
          return useRule;
        });
        delete rule.use;
      }
    });
    return config;
  }
});

Any ideas, pointers to articles, or help on how to get this project back on track with Next9.2 would be appreciated. Thanks.

[Timer]

This is an error in your custom configuration. You should start by null checking rule.test for rule.test.toString().

Closing as questions belong on Spectrum, thanks!
https://spectrum.chat/next-js

[cloudsociety]

Sorted it. For anyone that lands on this issue, config.rules seems to be passing objects that don't have a test item.

Change the if-statement to if (rule.test && rule.test.toString().includes(".scss")) {.

(He writes as @Timer posts a solutions. Thank you, @Timer.)