Question 49678 in Javascript Question posted in
A very good W3school tutorial can be found here.

Getting Unhandled Runtime Error, Error: "undefined" is not valid JSON in when importing Client component to server component – Javascript

I have trying to implement a simple counter component that will increase the count of the state variable when a button is clicked, so i made a separate file Couter.tsx and placed into the component folder in the root of the next project. Here is the code for the Counter.tsx file –

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

But when i import this component into the main page.tsx file, I get this strange error –

Unhandled Runtime Error
Error: "undefined" is not valid JSON

Call Stack
React
updateDehydratedSuspenseComponent
node_modulesnextdistcompiledreact-domcjsreact-dom.development.js (16088:0)
updateSuspenseComponent
node_modulesnextdistcompiledreact-domcjsreact-dom.development.js (15788:0)
beginWork$1
node_modulesnextdistcompiledreact-domcjsreact-dom.development.js (17103:0)
beginWork
node_modulesnextdistcompiledreact-domcjsreact-dom.development.js (25615:0)
performUnitOfWork
node_modulesnextdistcompiledreact-domcjsreact-dom.development.js (24465:0)
workLoopSync
node_modulesnextdistcompiledreact-domcjsreact-dom.development.js (24181:0)
renderRootSync
node_modulesnextdistcompiledreact-domcjsreact-dom.development.js (24146:0)
performConcurrentWorkOnRoot
node_modulesnextdistcompiledreact-domcjsreact-dom.development.js (23250:0)
workLoop
node_modulesnextdistcompiledschedulerindex.js (10:3921)
flushWork
node_modulesnextdistcompiledschedulerindex.js (10:3629)
MessagePort.performWorkUntilDeadline
node_modulesnextdistcompiledschedulerindex.js (10:1811)

What did I do wrong here? I have been trying to find a solution for a few hours.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    There was no error in my code, it turns out that my internet connection was not working at that time. The code runs find on other computers which have a proper network connection. I just wasted 1 day fixing the non existent problem in my code.


  2. 0

    Your component code works just fine, here is a Stackblitz reproduction of your app.

    Note that imports can use aliases, the example above uses a relative import path.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search