“use server”; Is Breaking Everything In My App

I’ve got one post going that touches on this subject of “use server”; breaking my app: supportHow Do I Update Client Signals When Using "use server";

I’ve been working on this for days at this point. If I use “use server”; on its own, it works. If I use client side code on its own, it works. But any time I try to pass data between the client and the server everything breaks. My last comment in the post above uses the example right out of the docs to show the errors.

I get a long list of errors. $R reference errors, internal server errors, Uncaught type errors, etc.

Basically, I can only work with the server OR the client, but not both at the same time.

Is this expected behavior? Or are we supposed to be able to work with server-side and client-side code at the same time?

For clarity sake, here’s a dead simple example.

Here, clicking the “Run Function” button causes “Error from functionTwo” to be printed to the console. This is expected behavior.

export default function MyComponent() {

  async function functionOne() {
    try {
      await functionTwo();
    } catch (error: any) {
      console.log(error.message);
    } 
  }

  async function functionTwo() {
    throw new Error("Error from functionTwo");
  }

  return (
    <button onClick={functionOne}>
      Run Function
    </button>
  );
}

export default function MyComponent() {

  async function functionOne() {
    try {
      await functionTwo();
    } catch (error: any) {
      console.log(error.message);
    } 
  }

  async function functionTwo() {
    throw new Error("Error from functionTwo");
  }

  return (
    <button onClick={functionOne}>
      Run Function
    </button>
  );
}

But, when I add “use server”; to functionOne, it breaks.

export default function MyComponent() {

  async function functionOne() {
    "use server";
    try {
      await functionTwo();
    } catch (error: any) {
      console.log(error.message);
    } 
  }

  async function functionTwo() {
    throw new Error("Error from functionTwo");
  }

  return (
      <button onClick={functionOne}>
        Run Function
      </button>
  );
}

export default function MyComponent() {

  async function functionOne() {
    "use server";
    try {
      await functionTwo();
    } catch (error: any) {
      console.log(error.message);
    } 
  }

  async function functionTwo() {
    throw new Error("Error from functionTwo");
  }

  return (
      <button onClick={functionOne}>
        Run Function
      </button>
  );
}

Here’s the error:

chunk-6APUFJ5X.js:864 Uncaught TypeError: handler.call is not a function
    at HTMLDocument.eventHandler

chunk-6APUFJ5X.js:864 Uncaught TypeError: handler.call is not a function
    at HTMLDocument.eventHandler

“use server”; Is Breaking Everything In My App

Similar Threads