为什么在下一个.js " use client "组件顶部给我这个错误？

Question

使用"use client"在我的组件的顶部，我得到这个错误:

event - compiled client and server successfully in 2.5s (265 modules)
wait  - compiling...
event - compiled client and server successfully in 932 ms (265 modules)
wait  - compiling /page (client and server)...
event - compiled client and server successfully in 2.5s (531 modules)
wait  - compiling...
event - compiled client and server successfully in 1131 ms (531 modules)
error - SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (<anonymous>)
wait  - compiling /favicon.ico/route (client and server)...
event - compiled successfully in 455 ms (300 modules)`

对于这个代码:

`      "dependencies": {
"eslint": "8.38.0",
"eslint-config-next": "13.3.0",
"next": "13.3.0",
"react": "18.2.0",
"react-dom": "18.2.0"
}`

'use client'
export default function Home() {
console.log("====================================");
console.log("Test");
console.log("====================================");
return (
<>
<h1>Next.js</h1>
</>
);
}

我尝试使用client-side-render，我也有一个错误

Answer 1

令人惊讶的是，您不能将"use client"指令与export default function F () {}一起设置，而是与const F = () => {}; export default F一起设置。虽然很奇怪，但这个方法对我很有效。好运！

"use client"
const Home = () => {
console.log("====================================");
console.log("Test");
console.log("====================================");
return (
<>
<h1>Next.js</h1>
</>
);
};
export default Home;