I am trying Next.js for the first time and building a simple application with it, everything seems to be working fine but whenever i try to add a "use client" tag at the begining of a ponents so i can use some hooks the app breaks and throw this error:

SyntaxError: "undefined" is not valid JSON

this is the page.js file:

import { Inter } from "next/font/google";
import styles from "./page.module.css";

import Nav from "./ponents/Nav";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  return (
    <main className={styles.main}>
      test page
      <Nav />
    </main>
  );
}

and this is the Nav.jsx file:

'use client';
export default function Nav() {
  return <h1>hii</h1>;
}

So when i run "npm run dev" the page crashes but if i run it in --turbo mode it works fine

Does anyone know why or how to make it work thank you

EDIT: for anyone that might be having a similar issue, i think its a windows problem because i tried to run the same script on a linux OS using a virtual machine and i hade no problems. Also if anyone managed to make it work on windows please let me know how.

I am trying Next.js for the first time and building a simple application with it, everything seems to be working fine but whenever i try to add a "use client" tag at the begining of a ponents so i can use some hooks the app breaks and throw this error:

SyntaxError: "undefined" is not valid JSON

this is the page.js file:

import { Inter } from "next/font/google";
import styles from "./page.module.css";

import Nav from "./ponents/Nav";

const inter = Inter({ subsets: ["latin"] });

export default function Home() {
  return (
    <main className={styles.main}>
      test page
      <Nav />
    </main>
  );
}

and this is the Nav.jsx file:

'use client';
export default function Nav() {
  return <h1>hii</h1>;
}

So when i run "npm run dev" the page crashes but if i run it in --turbo mode it works fine

Does anyone know why or how to make it work thank you

EDIT: for anyone that might be having a similar issue, i think its a windows problem because i tried to run the same script on a linux OS using a virtual machine and i hade no problems. Also if anyone managed to make it work on windows please let me know how.

• javascript
• reactjs
• next.js
• error-handling

• Do you sure the error came from Nav ponent? – Tom Fan Commented Apr 19, 2023 at 6:55
• @TomFan yes because when i remove the "use client" from the ponent it doesnt throw any errors – zouzou b lebiane Commented Apr 19, 2023 at 15:15
• confirm, same issue in Windows, switch to WSL2 piles and work fine – Vladimir Buskin Commented Apr 28, 2023 at 18:08

4 Answers 4

same happened with me just terminate current session and start again it worked for me

I had the same error when I created the file and then inserted the "use client" code.

It was solved by stopping the project and running it with "yarn dev" again.

so for anyone still having this issue. i just updated the project that was giving me this issue to th latest version of next 13 at the moment which is 13.4.1 and it seems that everything is working fine now.

happy coding

If you need CSR, you need to add 'use client' at the head of every page & ponent.

more: Sometimes if you use third-party UI libry(like antd-pro),you have to transform yourself (refer: next/dynamic with property 'ssr:false')