node.js - 为什么在我的项目中包含 slick-carousel 会出错？

Question

最近我在我的项目中包含了 react-slick，我想使用 react-carousel 包提供的基本样式。因此，如文档中所述，我将这两个文件包含在我的轮播组件中，如下所示：

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

现在，当我运行我的前端应用程序（客户端）时一切正常，而且我没有遇到任何问题，CSS 运行良好。当我使用后端（服务器端渲染）运行我的应用程序或将更改推送到 heroku 时，我收到此错误：

(node:12612) UnhandledPromiseRejectionWarning: C:\Users\Aleksa\Desktop\Sajtovi\P
ictureHum\node_modules\slick-carousel\slick\slick.css:1
.slick-slider
^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\Users\Aleksa\Desktop\Sajtovi\PictureHum\build\node
\main.b883da29.js:1:1200916)
    at i (C:\Users\Aleksa\Desktop\Sajtovi\PictureHum\build\webpack\bootstrap:20:
5)
    at Object.injectIntl (C:\Users\Aleksa\Desktop\Sajtovi\PictureHum\build\node\
components\TransactionPanel\TransactionPanel.js:632:26)
    at i (C:\Users\Aleksa\Desktop\Sajtovi\PictureHum\build\webpack\bootstrap:20:
5)
    at Object.<anonymous> (C:\Users\Aleksa\Desktop\Sajtovi\PictureHum\build\node
\main.b883da29.js:1:560707)
    at i (C:\Users\Aleksa\Desktop\Sajtovi\PictureHum\build\webpack\bootstrap:20:
5)
    at Object.<anonymous> (C:\Users\Aleksa\Desktop\Sajtovi\PictureHum\build\node
\main.b883da29.js:1:434689)
    at i (C:\Users\Aleksa\Desktop\Sajtovi\PictureHum\build\webpack\bootstrap:20:
5)
    at Module.<anonymous> (C:\Users\Aleksa\Desktop\Sajtovi\PictureHum\build\node
\store.js:21:52)

所以我猜它与SSR和webpack有关。有没有人遇到过类似的问题，有什么解决方法？我将非常感激。干杯!

标签： node.jsreactjsslick.jsreact-slick