类型'{}‘不能赋值给类型'IntrinsicAttributes

Question

我已经测试了以下关于vite + ts的示例https://codesandbox.io/s/w9vd2，该示例运行正常，使用以下命令生成生产包时出现问题：

npm运行构建

Vite给了我以下错误。

src / App.vue: 4: 4- TS2322错误:类型'{}‘不可分配给类型'IntrinsicAttributes & Partial <{zoom: boolean；tag: string；virtualIndex: string | number；}> < <{tag：{tag：{ type : StringConstructor；default: string；}；swiperRef：{...；}；zoom：{...；}；virtualIndex：{...；}；}> & VNodeProps & AllowedComponentProps & ComponentCustomProps，DefaultKeys <... >>’。类型'{}‘中缺少属性'swiperRef’，但在类型'Omit & VNodeProps & AllowedComponentProps & ComponentCustomProps，DefaultKeys <... >>‘中需要。

4幻灯片1幻灯片2幻灯片3幻灯片4 幻灯片5幻灯片6幻灯片7幻灯片8幻灯片9

我正在测试的代码如下：

<template>
<swiper :navigation="true" class="mySwiper">
  <swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide><swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide><swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide><swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>

<script lang="ts">
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';

import "swiper/css/navigation"

import './style.css';


// import Swiper core and required modules
import SwiperCore, {
  Navigation
} from 'swiper';

// install Swiper modules
SwiperCore.use([Navigation]);


export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
        
        
    };
  },
  methods: {
    
  }
  
}
</script>

我的tsconfig.json是

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    //se egregaron estos 2 para solventar problemas de compilacion de produccion
    "noImplicitAny": false,
    "allowJs": true,
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

有没有人遇到过类似的问题？

Answer 1

解决方案：

更新swiper 7.0.9

npm i swiper@7.0.9