我正在尝试为我的 React/Typescript 项目使用 react-multi-carousel 库。
我在终端中收到此错误：
assets by status 169 KiB [cached] 9 assets
orphan modules 4.44 KiB [orphan] 9 modules
runtime modules 657 bytes 3 modules
modules by path ./node_modules/ 225 KiB 31 modules
modules by path ./src/ 8.02 KiB
modules by path ./src/*.ts 205 bytes 2 modules
modules by path ./src/*.css 1.57 KiB
./node_modules/css-loader/dist/cjs.js!./src/popup.css 695 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/App.css 917 bytes [built] [code generated]
./src/popup.tsx + 9 modules 4.66 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/components/styles/Home.css 1.58 KiB [built] [code generated]
ERROR in ./node_modules/react-multi-carousel/lib/revicons.eot 1:2
Module parse failed: Unexpected character '' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/css-loader/dist/cjs.js!./node_modules/react-multi-carousel/lib/styles.css 6:0-59 10:73-102
@ ./node_modules/react-multi-carousel/lib/styles.css 2:12-78 9:17-24 13:15-29
@ ./src/components/home/IndicatorCarousel.tsx 4:0-45
@ ./src/components/home/Home.tsx 5:0-52 10:28-45
@ ./src/App.tsx 3:0-42 6:28-32
@ ./src/popup.tsx 3:0-24 6:36-39
ERROR in ./node_modules/react-multi-carousel/lib/revicons.ttf 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/css-loader/dist/cjs.js!./node_modules/react-multi-carousel/lib/styles.css 5:0-59 9:73-102
@ ./node_modules/react-multi-carousel/lib/styles.css 2:12-78 9:17-24 13:15-29
@ ./src/components/home/IndicatorCarousel.tsx 4:0-45
@ ./src/components/home/Home.tsx 5:0-52 10:28-45
@ ./src/App.tsx 3:0-42 6:28-32
@ ./src/popup.tsx 3:0-24 6:36-39
ERROR in ./node_modules/react-multi-carousel/lib/revicons.woff 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/css-loader/dist/cjs.js!./node_modules/react-multi-carousel/lib/styles.css 4:0-60 8:73-102
@ ./node_modules/react-multi-carousel/lib/styles.css 2:12-78 9:17-24 13:15-29
@ ./src/components/home/IndicatorCarousel.tsx 4:0-45
@ ./src/components/home/Home.tsx 5:0-52 10:28-45
@ ./src/App.tsx 3:0-42 6:28-32
@ ./src/popup.tsx 3:0-24 6:36-39
这是 IndicatorCarousel.tsx：
import * as React from "react";
import "../styles/Home.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
slidesToSlide: 3 // optional, default to 1.
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 5,
slidesToSlide: 3 // optional, default to 1
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 5,
slidesToSlide: 3 // optional, default to 1.
}
};
const IndicatorCarousel = () => {
return (
<div className="IndicatorCarousel">
<div className="IndicatorCarouselText">
Select your preferred stock indicators
</div>
<br></br>
<div className="IndicatorCarouselBorder">
<Carousel
swipeable={false}
draggable={false}
showDots={true}
responsive={responsive}
ssr={true} // means to render carousel on server-side.
infinite={true}
autoPlaySpeed={1000}
keyBoardControl={true}
customTransition="all .5"
transitionDuration={500}
containerClass="carousel-container"
removeArrowOnDeviceType={["tablet", "mobile"]}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
>
<div className="IndicatorCarouselCard">
Test
</div>
<div className="IndicatorCarouselCard">
Test2
</div>
<div className="IndicatorCarouselCard">
test3
</div>
<div className="IndicatorCarouselCard">
test4
</div>
<div className="IndicatorCarouselCard">
test5
</div>
</Carousel>
</div>
</div>
);
};
export default IndicatorCarousel;
webpack.config：
const webpack = require("webpack");
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const config = {
entry: {
popup: path.join(__dirname, "src/popup.tsx"),
content: path.join(__dirname, "src/content.ts"),
background: path.join(__dirname, "src/background.ts"),
},
output: { path: path.join(__dirname, "dist"), filename: "[name].js" },
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
exclude: /\.module\.css$/,
},
{
test: /\.ts(x)?$/,
loader: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
},
},
],
include: /\.module\.css$/,
},
{
test: /\.svg$/,
use: "file-loader",
},
{
test: /\.png$/,
use: [
{
loader: "url-loader",
options: {
mimetype: "image/png",
},
},
],
},
],
},
resolve: {
extensions: [".js", ".jsx", ".tsx", ".ts"],
alias: {
"react-dom": "@hot-loader/react-dom",
},
},
devServer: {
contentBase: "./dist",
},
plugins: [
new CopyPlugin({
patterns: [{ from: "public", to: "." }],
}),
],
};
module.exports = config;