next.js: client side pages not working - next13

[Not working only in Windows] Tested using create-next-app@13.3.0, 13.1.1, and 13.2.5-canary.25. When I add “use client” at the top of page.tsx, I get the following error:

error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>)

I get the same error as well

error - SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()

This is my client component

"use client"

import { useState } from "react"

export default function UserSearch() {
  const [searchTerm, setSearchTerm] = useState("")

  return (
    <div className="w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
      <div className="flex flex-col items-center py-10">
        <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">Search</h5>
        <input
          className="w-1/2 px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
          type="text"
          placeholder="Search for users"
          value={searchTerm}
          onChange={e => setSearchTerm(e.target.value)}
        />
      </div>
    </div>
  )
}

and I import the component in my page.tsx

Changing the component to an arrow function works. Example:

function UserSearch(){ //… return … } To

Const UserSearch= () => { //… return … }

I still have this error, even if I add the "use client" at the top of the document, I see there is a log in the server side

I get the same error as well

error - SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()

This is my client component

"use client"

import { useState } from "react"

export default function UserSearch() {
  const [searchTerm, setSearchTerm] = useState("")

  return (
    <div className="w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
      <div className="flex flex-col items-center py-10">
        <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">Search</h5>
        <input
          className="w-1/2 px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
          type="text"
          placeholder="Search for users"
          value={searchTerm}
          onChange={e => setSearchTerm(e.target.value)}
        />
      </div>
    </div>
  )
}

and I import the component in my page.tsx

Same compilation error here (using appDir) Both static and dynamic imports are triggering the server to try to pre-render it. It obviously does not work as I’m using window in a Client Component.

[Not working only in Windows] Tested using create-next-app@13.3.0, 13.1.1, and 13.2.5-canary.25. When I add “use client” at the top of page.tsx, I get the following error:

error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse ()

I also had a similar error using version 13.3.0 but when I used version 13.1.1 the error disappeared make sure that your NextJS version matches the version that you specified when you ran npx create-next-app@13.1.1 --experimental-app although I specified installing version 13.1.1 in the command, it installed version 13.3.0 when I looked at my package.json file. so, I manually changed the version in my package.json file, deleted the node_modules folder, and installed all the packages again. and then the error was fixed

I get the same error as well

error - SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()

This is my client component

"use client"

import { useState } from "react"

export default function UserSearch() {
  const [searchTerm, setSearchTerm] = useState("")

  return (
    <div className="w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
      <div className="flex flex-col items-center py-10">
        <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">Search</h5>
        <input
          className="w-1/2 px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
          type="text"
          placeholder="Search for users"
          value={searchTerm}
          onChange={e => setSearchTerm(e.target.value)}
        />
      </div>
    </div>
  )
}

and I import the component in my page.tsx

Changing the component to an arrow function works. Example:

function UserSearch(){ //… return … } To

Const UserSearch= () => { //… return … }

Why it works?

13.1.1

This does works. I didn’t understand why all the time I was using 'use client" my app broke. But this fixes it.

{ssr: false} has no impact for me either (in appDir). It is always pre-rendered.