请求的模块 '/_nuxt/models/component/blog/BlogPage.interface.ts' 未提供名为 'default' 的导出 - Nuxt 3 TypeScript 错误

Question

我在 nuxt 3 项目中使用 Typescript，当我从组件导入 Typescript 模型时收到此错误。

The requested module '/_nuxt/models/component/blog/BlogPage.interface.ts' does not provide an export named 'default'

这是我的组件。组件渲染器.vue

<script setup lang="ts">
import BlogPage from "~~/models/component/blog/BlogPage.interface";
import HomePage from "~~/models/component/home/HomePage.interface";
import ProductPage from "~~/models/component/product/ProductPage.interface";

const props = defineProps<{
  page: HomePage | ProductPage | BlogPage;
}>();
console.log(typeof props.page);
</script>

这是进口型号。BlogPage.interface.ts

interface BlogPage {
  data: any;
}

export default BlogPage;

最后这是我的nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  alias: {
    'models': './models/*',
  },
  typescript: {
    strict: true,
  },
  css: ["~/assets/css/main.css"],
  modules: ["@pinia/nuxt", "@nuxtjs/apollo"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  pinia: {
    autoImports: ["defineStore"],
  },
  apollo: {
    autoImports: true,
    authType: "Bearer",
    authHeader: "Authorization",
    tokenStorage: "cookie",
    clients: {
      default: {
        httpEndpoint: "http://localhost:1337/graphql",
      },
    },
  },
});

当我检查每个地方时，我在实现中没有看到任何问题，但此错误不断出现。我想检查一下如何解决这个问题。

Answer 1

我在这个问题中找到了解决方案。检查Estus Flask 的答案。正如他在评论中提到的，我已将导入语句更改如下。

<script setup lang="ts">
import type BlogPage from "~~/models/component/blog/BlogPage.interface";
import type HomePage from "~~/models/component/home/HomePage.interface";
import type ProductPage from "~~/models/component/product/ProductPage.interface";

const props = defineProps<{
  page: HomePage | ProductPage | BlogPage;
}>();
console.log(typeof props.page);
</script>

添加type后将import修复此错误。但即使没有type我的实施，根据理论也没有错。但它在我的 Nuxt 3 typescript 实现中不起作用。所以我用了，

import type