Server-side webpack not able to read css file from node_modules

Question

I'm trying to create one component using react-responsive-carousel.

But getting below message when trying to build the code for Server side. For Client Side, MiniCssExtract loader is able to read this css file:

.carousel .control-arrow, .carousel.carousel-slider .control-arrow {
^
SyntaxError: Unexpected token .
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)

My webpack.client.config is

{
    test: /\.css$/,
    include: [/node_modules/],
    use: [
      { loader: MiniCssExtract.loader }, 
      { loader: 'css-loader' }  
    ] 
  }

And webpack.server.config is

{
    test: /\.css$/, 
    use: [
      { loader: "css-loader/locals" }
    ] 
  } 

Component code is this:

import React from 'react'; 
import 'react-responsive-carousel/lib/styles/carousel.css';
import { Carousel } from 'react-responsive-carousel';
import style from './component.css';

class Test extends React.Component {
  render() { 
    return ( 
        <Carousel>
            <div>
                <img src="assets/1.jpeg" />
                <p className={`${style.legend}`}>Legend 1</p>
            </div>
            <div>
                <img src="assets/2.jpeg" />
                <p className={`${style.legend}`}>Legend 2</p>
            </div>
        <Carousel>
    );
  }
}

export default Test;

Please help.