Серверный веб-пакет не может прочитать css-файл из node_modules - PullRequest
0 голосов
/ 08 ноября 2018

Я пытаюсь создать один компонент, используя act-responseive-carousel .

Но получаю сообщение ниже при попытке построить код для серверной части. Для клиентской стороны загрузчик 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;

Пожалуйста, помогите.

...