Nuxt 3.5.1运行dev时遇‘Cannot read properties of undefined (reading 'sys')’错误求助

针对你遇到的Cannot read properties of undefined (reading 'sys')错误，提供以下几种可行的解决思路：

1. 将类型定义从type改为interface #

Vue的defineProps宏对TypeScript接口（interface）的兼容性更好，尝试修改你的types.ts文件：

export interface IProduct {
  name?: string;
  id?: number;
  price?: number;
  thumbnail?: string;
  title: string;
}

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

然后在组件中导入该接口使用：

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

2. 升级Nuxt版本 #

Nuxt 3.5.1可能存在类型解析的小bug，升级到同系列的较新版本（比如3.5.3及以上），通常这类宏相关的类型问题会在小版本更新中修复。执行升级命令：

npm install nuxt@^3.5.3

3. 显式结合运行时props声明 #

如果上述方法无效，可以尝试同时提供运行时的props定义和类型约束，确保Vue宏能正确解析：

<script lang="ts" setup>
import type { IProduct } from './types';
const p = defineProps<IProduct>({
  title: {
    type: String,
    required: true
  },
  name: String,
  id: Number,
  price: Number,
  thumbnail: String
});
</script>

这里注意用import type来导入类型，避免不必要的运行时引入。

4. 检查tsconfig.json配置 #

确保你的tsconfig.json中开启了必要的TypeScript严格模式，并且Vue编译配置正确：

{
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true
  },
  "vueCompilerOptions": {
    "target": 3,
    "strictTemplates": true
  }
}

问题原因分析 #

这个错误通常是因为Nuxt/Vue的类型解析宏在处理导入的type类型定义时，无法正确提取类型信息，导致编译阶段出现内部错误。而内联类型定义时，编译器能直接解析类型结构，因此不会触发该问题。

内容的提问来源于stack exchange，提问作者aym1781969