我在尝试 next14 时,使用 server component 遇到一个语法错误提示,实际代码可以正确执行。我想要消除这个错误,应该如何操作呢?
- 错误信息
- 报错代码块
import { Suspense } from "react";
const waitForItems = async () => {
return new Promise<any[]>((resolve) => {
setTimeout(() => {
resolve(new Array(100).fill("1"));
}, 1000);
});
};
async function Content() {
const items = await waitForItems();
return (
<div>
{items?.map((item, index) => (
<div key={index}>{index}</div>
))}
</div>
);
}
export default function PageContent() {
// Content 组件报错信息如上
return (
<Suspense fallback={<div>loading……</div>}>
<Content />
</Suspense>
);
}
- package.json 信息如下
{
"name": "my-next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.0.1"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.0.1"
}
}