Nuxt 3.5.1 get error on build " ERROR Cannot read properties of undefined (reading 'sys') (x4) "

I have an application made using Nuxt 3.5.1 this is the script tag :

<script lang="ts" setup>
     import { IProduct } from './types';
     const p = defineProps<IProduct>();
</script>

types.ts :

export type IProduct =  {
   name?: string;
   id?: number;
   price?: number;
   thumbnail?: string;

   title: string;

}

export interface IProductSecond {
   n: string;
   id: number;
}

but when I run

>npm run  dev 

I get this error :

If I replace :

const p = defineProps<IProduct>();

with

const p = defineProps<{ name?: string;
   id?: number;
   price?: number;
   thumbnail?: string;
   title: string;}>();

It works fine

It's not long since Vue 3.3 is dropped and as of now, Nuxt doesn't have built-in support for Vue 3.3's "Imported Types". There's a workaround for this though:

• If you don't have typescript in package.json, add it npm i -D typescript (required)
• Add following code in your nuxt.config.ts:

import { existsSync, readFileSync } from "node:fs";

export default defineNuxtConfig({
  vite: {
    vue: {
      script: {
        fs: {
          fileExists(file: string) {
            return existsSync(file);
          },
          readFile(file: string) {
            return readFileSync(file, "utf-8");
          },
        },
      },
    },
  },
});

References:

• Announcing Vue 3.3
• Imported types (vue 3.3 feature) not working (Once this issue gets closed, you should remove the workaround)

The config for vite in the nuxt.config.ts isn't necessary anymore. It is enough to install the typescript package.