1

我正在尝试使用react-responsive-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;

请帮忙。

4

0 回答 0