Css-loader Module build failed (from ./node_modules/css-loader/dist/cjs.js):

Question

Moving code to a typescript repo, and im getting this error with my css loader. Im not sure if theres a better practice for utilize css in a typescript/react project? Right now I just define a styles.css file in the client code dir and import it in my index.ts

Module build failed (from ./node_modules/css-loader/dist/cjs.js):

this is my package.json

{
  "name": "typescript-express-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:dev": "tsc --watch --preserveWatchOutput",
    "start:dev": "nodemon dist/index.js & webpack -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.4.0",
    "bootstrap": "^5.3.1",
    "express": "^4.18.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^8.0.7",
    "react-router-dom": "^6.15.0",
    "react-select": "^5.7.4",
    "style-loader": "^3.3.3",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/node": "^20.4.10",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@types/uuid": "^9.0.2",
    "css-loader": "^6.8.1",
    "nodemon": "^3.0.1",
    "ts-loader": "^9.4.4",
    "typescript": "^5.1.6",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

and this is my webpack.config.js, any guidance would be appreciated.

const path = require("path");

module.exports = {
  entry: "./client/index.tsx",
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ["ts-loader", "css-loader", "style-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  mode: "development",
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".css"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },
};