#Trying to use client components in nextjs 13.3.0 results in weird constant error.

14 messages · Page 1 of 1 (latest)

nimble lotus
#

I want to use the react component UseState and I want to use the OnClick function, and as I read the docs I've added the "use client" line to the top of the file I'm continuously getting this error SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>)
Here is a snippet of my code (navbar.js) that is located in the components folder

'use client'
import { useState, useEffect } from "react"
import { navLinks } from "../constants"
import { close, logo, menu } from '../../public'
import Image from "next/image"
import { Poppins } from 'next/font/google'

const poppins = Poppins({
    weight: ['400', '700'],
    subsets: ['devanagari', 'latin'],
    variable: '--font-poppins'
})

export default function Navbar() {
    const [toggle, setToggle] = useState(false)
    return (
some code here
            <div className="sm:hidden flex flex-1 justify-end items-center">
                <Image 
                src={toggle ? close : menu} 
                alt='menu' className='w-[28px] h-[28px] object-contain' 
                width={25} 
                height={25}
                onClick={() => setToggle((prev) => !prev)}
                />
            </div>
        </nav>
    )
}

Here is my file structure if it would help:
I import the navbar into the page.js file
Is this a next js bug or am I doing something wrong, any help will be appreciated!

image.png
faint thorn
#

Is there anywhere you’re using a JSON?

nimble lotus
#

only in the constants folder where i have some text

# 
'use client'
import { useState, useEffect } from "react"
import { navLinks } from "../constants"
import { close, logo, menu } from '../../public'
import Image from "next/image"
import { Poppins } from 'next/font/google'

const poppins = Poppins({
    weight: ['400', '700'],
    subsets: ['devanagari', 'latin'],
    variable: '--font-poppins'
})

export default function Navbar() {
    const [toggle, setToggle] = useState(false)
    return (
        <nav className="w-full flex py-6 justify-between items-center navbar">
            <Image src={logo} alt='hoobank' className="w-[124px] h-[32px]" width={1000} height={1000}/>
            <ul className="list-none sm:flex hidden justify-end items-center flex-1">
                {navLinks.map((nav, index) => (
                   <li key={nav.id} className={`${poppins.className} font-normal cursor-pointer text-[16px] ${index === navLinks.length - 1 ? 'mr-0' : 'mr-10'} text-white`}>
                    <a href={`#${nav.id}`}>{nav.title}</a>
                   </li> 
                ))}
            </ul>

            <div className="sm:hidden flex flex-1 justify-end items-center">
                <Image 
                src={toggle ? close : menu} 
                alt='menu' className='w-[28px] h-[28px] object-contain' 
                width={25} 
                height={25}
                onClick={() => setToggle((prev) => !prev)}
                />
            </div>
        </nav>
    )
}```
#

heres the whole code

#

and this is the object that im fetching from that folder:

export const navLinks = [
  {
    id: "home",
    title: "Home",
  },
  {
    id: "features",
    title: "Features",
  },
  {
    id: "product",
    title: "Product",
  },
  {
    id: "clients",
    title: "Clients",
  },
];```
faint thorn
#

Yes it’s more than likely related to where the JSON is

#

It’s probably invalid

nimble lotus
#

hmm so i tried removing the json map and replaced it with just one hardcoded element but it still doesnt fix the error

faint thorn
#

Hmm

noble remnant
faint thorn
#

Good to know I won’t upgrade then lol

nimble lotus
#

Any way to downgrade or I have to wait for an update

noble remnant