'Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths

I upgraded React v16.14 app to run with Webpack v5 from v4. I'm seeing hundreds of warnings with .scss files like below even though the app seems to run fine.

Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "src/"
 * "src/scss"
 * "src/scss/_colors"
 * and more ...
 @ ./src/login/login.scss 8:6-487 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-457 83:0-457 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/login/login.js 35:0-27
 @ ./src/app.js 11:77-120
 @ ./src/index.js 16:0-47 22:35-47
//_colors.scss
$primary: blue;

//login.scss
@use 'scss/colors';
@use 'scss/typography';

.container {
  color: colors.$primary;
}

I tried adding the below code to include absolute paths, but that didn't work

//webpack.config.js
{
        loader: "sass-loader",
        options: {
                    implementation: require.resolve("sass"),
                    sassOptions: {
                        //DID NOT WORK
                        //includePaths: [path.resolve(__dirname, 'src/scss')],
                        //DID NOT WORK
                        includePaths: [path.resolve(__dirname, 'src')],
                    }
                },
     }

//.env
SASS_PATH=src:node_modules
//package.json
"css-loader": "^6.5.1",
"postcss-loader": "^6.2.1",
"style-loader": "^3.3.1",
"sass": "^1.45.1",
"sass-loader": "^12.3.0",
"webpack": "^5.64.4",

I tried looking up more on this but couldn't find more information other than the absolute path solutions. How to fix these warnings?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source