React-SSR: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Question

I am trying to implement SSR in React and I am using webpack and babel configuration.

webpack.shared.config.js

module.exports = {
  mode: "development",

  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },

  resolve: {
    extensions: [".js", ".less"],
  },
};

webpack.client.config.js

const path = require("path");
const { merge } = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const sharedConfig = require("./webpack.shared.config.js");

const clientPort = 8080;

const config = {
  target: "web",

  entry: "./src/browser/index.js",

  output: {
    path: path.join(__dirname, "./build/client"),
    filename: "scripts/bundle.js",
    publicPath: `http://localhost:${clientPort}/`,
  },

  devServer: {
    port: clientPort,
    liveReload: true,
  },

  module: {
    rules: [
      {
        test: /\.less$/,
        exclude: [
          /\.(js|jsx|mjs)$/,
          /\.html$/,
          /\.json$/,
          /\.(less|config|variables|overrides)$/,
        ],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                exportLocalsConvention: "camelCase",
                localIdentName: "[local]_[hash:base64:5]",
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: "styles/bundle.css",
    }),
  ],
};

module.exports = merge(sharedConfig, config);

webpack.server.config.js

const path = require("path");
const webpackNodeExternals = require("webpack-node-externals");
const { merge } = require("webpack-merge");
const sharedConfig = require("./webpack.shared.config.js");

let config = {
  target: "node",

  entry: "./src/server/index.js",

  output: {
    path: path.join(__dirname, "./build/server"),
    filename: "bundle.js",
  },

  externals: [webpackNodeExternals()],

  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: "css-loader",
            options: {
              modules: {
                exportOnlyLocals: true,
                exportLocalsConvention: "camelCase",
                localIdentName: "[local]_[hash:base64:5]",
              },
            },
          },
        ],
      },
    ],
  },
};

module.exports = merge(sharedConfig, config);

And this are my scripts in package.json. I am using nodemon to run the server

  "scripts": {
    "clear": "rimraf build",
    "clear:server": "rimraf build/server",
    "build:client": "webpack --config webpack.client.config.js",
    "build:server": "webpack --config webpack.server.config.js",
    "start": "node build/server/bundle.js",
    "dev:client": "webpack serve --config webpack.client.config.js",
    "dev:server": "nodemon --watch client --watch server --exec 'run-s clear:server build:server start'",
    "dev": "run-p dev:client dev:server",
    "build": "run-s clear build:*"
  },

And this is my folder structure

I have added all the config and loaders properly but still getting the error

ERROR in ./src/styles/App.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Can anyone help me out ?