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

Question

I use Typescript in nuxt 3 project and I'm getting this error when I import typescript models from compoents.

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

This is my component. ComponentRenderer.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>

and this is the imported model. BlogPage.interface.ts

interface BlogPage {
  data: any;
}

export default BlogPage;

finally this is my 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",
      },
    },
  },
});

As I check every where I don't see any issue in my implementation but this error keep appearing. I want to check how I can fix this issue.

Answer 1

I found a solution in this question. Check Estus Flask answer. As he mentioned in that comment I have changed my import statements as below.

<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>

adding type after import will fix this error. But even without type my implementation was not wrong according to the theory. But some how it didn't work in my Nuxt 3 typescript implementation. So I used,

import type