Error while configuring webpack 4 in my react (create-react-app) project

Question

i am configuring the webpack 4 in my react project (create-react-app) i have installed all the require loaders/file to configure my webpack, but there is always some different error, (some time its about sass-loader/css-loader/style-loader) Now am dealing with (eot,woff,woff2,ttf) files error. i don't know, i am conflicting the versions of node-sass/webpack/loaders or what. please help me to configuring webpack in my project. i am attaching the configuration files and errors screen.

Here is my devdependencies in my package-json file.

    "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.5",
    "css-loader": "^3.6.0",
    "file-loader": "^6.2.0",
    "laravel-echo": "^1.11.2",
    "less": "^4.1.2",
    "less-loader": "^5.0.0",
    "node-sass": "^4.14.1",
    "pusher-js": "^7.0.3",
    "raw-loader": "^4.0.2",
    "react-error-overlay": "6.0.9",
    "sass": "^1.51.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^1.3.0",
    "ts-loader": "^9.2.8",
    "url-loader": "^4.1.1",
    "webpack": "^4.42.0",
    "webpack-cli": "^4.9.2"
  }

webpack.config.js file

const path = require("path");
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
  },
  // ...add the babel-loader and preset
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      //   {
      //     test: /\.(scss|css|sass)$/,
      //     use: ["sass-loader", "style-loader", "css-loader"],
      //   },
      {
        test: /\.(scss|css|sass)$/,
        use: [
          // style-loader
          {
            loader: "style-loader",
          },
          // css-loader
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
          // sass-loader
          {
            loader: "sass-loader",
            options: {
              modules: true,
            },
          },
        ],
      },

      {
        test: /\.(woff2|woff|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            // options: {
            //   name: "[name].[ext]",
            //   outputPath: "fonts/",
            // },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },

  // ...add resolve to .jsx extension
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
};

.babelrc

  {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}