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

Question

老师你好 我用的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
}

目录结构

命令行不报错，浏览器里报错

Answer 1

张轩 2021-08-06 16:13:28

同学解决了

将任何引入只有类型的地方，前面都加一个关键字 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 #1

  非常感谢！

Answer 2

张轩 2021-08-05 22:31:24

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

• 提问者 辰辰ollie #1

  那麻烦老师了 git地址 https://github.com/ollieSk8/zhihu-project.git 麻烦您帮忙看一下，stackoverflow都搜了一遍也没找到问题出在哪

• 提问者 辰辰ollie #2

  老师问题解决了，vite里导入类型要显示的声明import type XXXX比如
  <script lang="ts" setup>
  import type { PropType } from 'vue'
  import type { ColumnProps } from '../typings'
  defineProps({
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true,
    },
  })
  </script>
  在vite的issues里找到的，这么看还挺合理的，导入类型就显示的声明 import type，和import组件区分开，比较语义化。这里跟vue-cli里直接导入类型不一样。

• 张轩 回复 提问者 辰辰ollie #3

  哈哈 我刚回复你 就发现你找到解决方案啦

点开查看后面1条评论