TypeScript中Material UI与react-swipeable-views版本不匹配问题求助

我在TypeScript项目中尝试实现一个集成Material UI的react-swipeable-views轮播组件，组件代码如下：

import * as React from "react";
import { useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import MobileStepper from "@mui/material/MobileStepper";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import SwipeableViews from "react-swipeable-views";
import { autoPlay } from "react-swipeable-views-utils";

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

const images = [
  {
    label: "San Francisco – Oakland Bay Bridge, United States",
    imgPath:
      "https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60",
  },
  {
    label: "Bird",
    imgPath:
      "https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60",
  },
  {
    label: "Bali, Indonesia",
    imgPath:
      "https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250",
  },
  {
    label: "Goč, Serbia",
    imgPath:
      "https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60",
  },
];

export default function Hero() {
  const theme = useTheme();
  const [activeStep, setActiveStep] = React.useState(0);
  const maxSteps = images.length;

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleStepChange = (step: number) => {
    setActiveStep(step);
  };

  return (
    <Box sx={{ maxWidth: 400, flexGrow: 1 }}>
      <Paper
        square
        elevation={0}
        sx={{
          display: "flex",
          alignItems: "center",
          height: 50,
          pl: 2,
          bgcolor: "background.default",
        }}
      >
        <Typography>{images[activeStep].label}</Typography>
      </Paper>
      <AutoPlaySwipeableViews
        axis={theme.direction === "rtl" ? "x-reverse" : "x"}
        index={activeStep}
        onChangeIndex={handleStepChange}
        enableMouseEvents
      >
        {images.map((step, index) => (
          <div key={step.label}>
            {Math.abs(activeStep - index) <= 2 ? (
              <Box
                component="img"
                sx={{
                  height: 255,
                  display: "block",
                  maxWidth: 400,
                  overflow: "hidden",
                  width: "100%",
                }}
                src={step.imgPath}
                alt={step.label}
              />
            ) : null}
          </div>
        ))}
      </AutoPlaySwipeableViews>
      <MobileStepper
        steps={maxSteps}
        position="static"
        activeStep={activeStep}
        nextButton={
          <Button
            size="small"
            onClick={handleNext}
            disabled={activeStep === maxSteps - 1}
          >
            Next
            {theme.direction === "rtl" ? (
              <KeyboardArrowLeft />
            ) : (
              <KeyboardArrowRight />
            )}
          </Button>
        }
        backButton={
          <Button size="small" onClick={handleBack} disabled={activeStep === 0}>
            {theme.direction === "rtl" ? (
              <KeyboardArrowRight />
            ) : (
              <KeyboardArrowLeft />
            )}
            Back
          </Button>
        }
      />
    </Box>
  );
}

但出现版本不匹配的错误，报错截图如下：

我的package.json配置如下：

{
  "name": "my-typescript-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.11",
    "@mui/material": "^5.15.11",
    "@mui/styled-engine-sc": "^6.0.0-alpha.17",
    "@types/react-swipeable-views": "^0.14.0",
    "@types/react-swipeable-views-utils": "^0.14.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.0",
    "react-router-dom": "^6.22.2",
    "react-swipeable-views-react-18-fix": "^0.14.1",
    "styled-components": "^6.1.8",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.18",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.2.2",
    "vite": "^5.1.4"
  }
}

我已经尝试调整多个版本，但问题仍未解决，请问接下来可以尝试哪些方法？

解决方案建议 #

• 修正导入路径：你安装的是react-swipeable-views-react-18-fix，但代码里还是导入原包路径，需要改成：

  import SwipeableViews from "react-swipeable-views-react-18-fix";
  import { autoPlay } from "react-swipeable-views-react-18-fix/lib/utils";
  

  该修复包的工具类路径和原包不同，必须调整导入才能正确引用。

• 移除冲突类型包：你安装的@types/react-swipeable-views和@types/react-swipeable-views-utils是针对原包的类型定义，和修复包不兼容，执行命令卸载：

  npm uninstall @types/react-swipeable-views @types/react-swipeable-views-utils
  

  修复包本身包含适配React 18的类型，无需额外安装原包类型。

• 清理缓存重装依赖：缓存可能导致版本解析异常，按以下步骤操作：

  1. 删除node_modules文件夹：rm -rf node_modules（Windows使用rmdir /s /q node_modules）
  2. 删除package-lock.json文件
  3. 重新安装依赖：npm install

• 替换为兼容轮播库：如果上述方法无效，可改用官方维护且支持React 18的轮播方案，比如@mui/material的Tabs组件结合滑动逻辑，或者切换到react-slick、embla-carousel这类兼容性更好的第三方库。

• 检查TypeScript配置：确保tsconfig.json的compilerOptions配置正确，比如jsx设为react-jsx，moduleResolution设为bundler（适配Vite），避免类型解析错误。

内容的提问来源于stack exchange，提问作者JokicPavle