[Bug?]: "invalid server function" when having a server function without a router

[huseeiin]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Error: invalid server function: 29bb30aa-0-test

Expected behavior 🤔

No response

Steps to reproduce 🕹

const test = () => {
  "use server";
  return 1;
};

export default function App() {
  return (
    <>
      <h1
        onClick={() => {
          test();
        }}
      >
        hi
      </h1>
    </>
  );
}

then click the h1

Context 🔦

No response

Your environment 🌎

version 2.0.0-alpha.3

[YanAnghelp]

Could you please tell me your file path?

[katywings]

@huseeiin What do you mean with without a router? I think the issue doesn't have anything to do with the router 🤔, I was able to reproduce the error by adding a server function to the basic fixture from this monorepo (apps/fixtures/basic) which uses the router. The error went away after exporting the server function.

[katywings]

Figured out the issue 😅. For the server (ssr) the JSX gets transpiled to "<button>hi</button>" - as the server does not understand onClick.

Since the onClick={() => { test(); }} does not exist in the ssr code, the test server function is considered to be unused and gets removed from the server code. The client still thinks it's there, resulting in Error: invalid server function: 29bb30aa-0-test

@lxsmnsyc Could we maybe add (transpile) something to the code to prevent server functions from being considered unused 🤔?

[lxsmnsyc]

@katywings might be configurable by tree-shaking. tbf it shouldn't even be removed because it's a module side-effect. I'll check some solution.

[huseeiin]

@huseeiin What do you mean with without a router? I think the issue doesn't have anything to do with the router 🤔, I was able to reproduce the error by adding a server function to the basic fixture from this monorepo (apps/fixtures/basic) which uses the router. The error went away after exporting the server function.

i meant no <Router> in app.tsx, just a component