类型“{}”不可分配给类型“IntrinsicAttributes <swiper-slide> vite+ ts答案

【问题标题】：Type '{}' is not assignable to type 'IntrinsicAttributes <swiper-slide> vite+ ts类型“{}”不可分配给类型“IntrinsicAttributes <swiper-slide> vite+ ts
【发布时间】：2021-10-18 01:31:02
【问题描述】：

我一直在测试下面的例子https://codesandbox.io/s/w9vd2，关于vite + ts，例子运行没有问题，使用命令生成生产包时出现问题：

npm 运行构建

Vite 出现以下错误。

src / App.vue: 4: 4 - TS2322 错误：类型 '{}' 不可分配给类型 'IntrinsicAttributes & Partial & 省略 & VNodeProps & AllowedComponentProps & ComponentCustomProps, DefaultKeys <...>> '。类型“{}”中缺少属性“swiperRef”，但类型“省略 & VNodeProps & AllowedComponentProps & ComponentCustomProps, DefaultKeys <...>> '.

4 幻灯片 1 幻灯片 2 幻灯片 3 幻灯片 4 swiper -slide> 幻灯片 5 幻灯片 6 幻灯片 7 幻灯片 8 swiper-slide> 幻灯片 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"]
}

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

【问题讨论】：

标签： typescript swiper vite

【解决方案1】：

解决方案：

更新 swiper 7.0.9

npm i swiper@7.0.9

【讨论】：