Issue during storybook setup "Cannot find module 'css-loader/lib/getLocalIdent'" in NextJs

Question

I am facing an issue while building my project after storybook setup. I am getting an error in css-loaders that getLocalIdent is missing. This is the exact error

Error

{ Error: Cannot find module 'css-loader/lib/getLocalIdent'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (next.config.js:9:30)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }

This is the next config file

Next.config.js

const withSass = require("@zeit/next-sass");
const withCss = require("@zeit/next-css");
const gNextJsAppProperties = require("./next.properties");

const env = process.env.ENV || "local";
const defaultGetLocalIdent = require("css-loader/lib/getLocalIdent");


const localIdentName =
env === "local" || env === "dev"
  ? "[name]__[local]--[hash:base64:5]"
  : "[hash:base64]";


const cssLoaderOptions = {
getLocalIdent: (loaderContext, localIdentName, localName, options) => {
  if (loaderContext.resourcePath.includes("node_modules")) {
    return localName;
  } else {
    return defaultGetLocalIdent(
      loaderContext,
      localIdentName,
      localName,
      options
    );
  }
},
localIdentName
};
module.exports = withSass(
withCss({
  cssLoaderOptions,
  distDir: "dist",
  cssModules: true
})
);

This is my package.json file with the dependencies.

Package.json

{
  "name": "test",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "next": "^9.4.4",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass": "^1.29.0"
  },
  "devDependencies": {
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^6.1.2",
    "@types/jest": "^25.2.3",
    "@types/node": "^12.12.50",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.8",
    "babel-loader": "^8.2.1",
    "babel-preset-react-app": "^10.0.0",
    "body-scroll-lock": "^2.7.1",
    "copy-webpack-plugin": "^6.1.0",
    "css-loader": "^4.2.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
  },
  "scripts": {
    "storybook": "start-storybook -p 6006 -c .storybook"
  }
}

As much as I have checked online most of the places its written that this getLocalIdent has been moved in css-loader but all the solutions suggested are not working for me.

It would be great if someone can suggest a fix for this as I am clueless on how to fix this.