The requested module XX does not provide an export named 'ColumnProps'

来源：4-5 ColumnList 组件编码

辰辰ollie

2021-08-05

老师你好我用的vite2 版 “vite”: “^2.4.4”,采用了setup语法，tsconfig.json 文件ColumnList.vue 文件 typings.ts文件如下，导入时候出现The requested module ‘/src/typings/index.ts’ does not provide an export named 'ColumnProps’
求解！

// components/ColumnList.vue
<template>
  <div>
    <ul>
      <li v-for="column in list" :key="column.id">
        <img :src="column.avatar" alt="" />
        <h5>{{ column.title }}</h5>
        <p>{{ column.description }}</p>
        <a href="#">进入专栏</a>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { ColumnProps } from '../typings'

export default defineComponent({
  name: 'ColumnList',
})
</script>
<script lang="ts" setup>
import { defineComponent, PropType } from 'vue'

defineProps({
  list: {
    type: Array as PropType<ColumnProps[]>,
    required: true,
  },
})
</script>

<style lang="less" scoped></style>

//typings/index.ts
export interface ColumnProps {
  id: number
  title: string
  avatar?: string
  description: string
}

目录结构
图片描述
命令行不报错，浏览器里报错

写回答

2回答

张轩

2021-08-06

已采纳

同学解决了

将任何引入只有类型的地方，前面都加一个关键字 type 即可

// 修改为，你的代码中有两处需要修改
import type { ColumnProps } from '../typings'

我看了一下 vite 的文档，vite 使用 esbuild 编译 ts，速度很快，因为直接转换成结果，所以不支持类型 only 的导入导出。https://cn.vitejs.dev/guide/features.html#typescript

文档的描述：

注意因为 esbuild 只执行转译工作而不含类型信息，所以它不支持 TypeScript 的特定功能例如常量枚举和隐式 “type-only” 导入。你必须在你的 tsconfig.json 中的 compilerOptions 里设置 "isolatedModules": true，这样 TS 才会警告你哪些功能无法与独立编译模式一同工作。

同时还发现了一个 issue 和你描述的问题一样：https://github.com/vitejs/vite/issues/2117

亲测可用

辰辰ollie

非常感谢！

2021-08-06

共1条回复

张轩

2021-08-05

同学你好从你的代码上我没看出有什么问题我在本地也没有用 vite 脚手架，同学可以否将代码（git）提供给我一下，我在本地给你试一下，我会使用 vue cli 和 vite 同时试一下，看看是什么问题。

慕粉孔帅

张轩

回复张轩：老师您好，单个引入的话确实可以，但是还有其他引入应该怎么写呢，比如说该例子中还有组件ColumnList的引入，如果这样写（分开引入）：import ColumnList from './components/ColumnList.vue' import type { ColumnProps } from './components/ColumnList.vue' 或者这样写（两个一起引入）：import ColumnList, type { ColumnProps } from './components/ColumnList.vue' 都是不行的

2024-05-09

共4条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

The requested module XX does not provide an export named 'ColumnProps'

回答 1

warning "export 'ColumnProps' was not found in './testData'

回答 1

我的ColumnList组件里面有这个接口，怎么还有这个提示，渲染也没问题

回答 4

Property 'unmount' does not exist on type 'App<Element>'

回答 1

ColumnProps和testData写的都没有问题，但是提示说testData错过了某个属性。如果ColumnProps去掉可以正常编译

回答 1

打开慕课网App查看更多内容