reactjs - サーバー側の webpack が node_modules から css ファイルを読み取れない

Question

react-responsive-carouselを使用して 1 つのコンポーネントを作成しようとしています。

ただし、サーバー側のコードをビルドしようとすると、以下のメッセージが表示されます。クライアント側の場合、MiniCssExtract ローダーは次の css ファイルを読み取ることができます。

.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)

私のwebpack.client.configは

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

そして webpack.server.config は

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

コンポーネント コードは次のとおりです。

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;

助けてください。