While working on my Nuxt 3 project with Typescript, I encountered an error when importing Typescript models from components:
The requested module '/_nuxt/models/component/blog/BlogPage.interface.ts' does not provide an export named 'default'
This is the component where the error occurs: 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 here is the content of the imported model file: BlogPage.interface.ts
interface BlogPage {
data: any;
}
export default BlogPage;
Lastly, this snippet shows 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",
},
},
},
});
Despite thorough checking, I cannot seem to identify the issue in my implementation that causes this persistent error. I am seeking advice on resolving this issue.