Server actions doesn't work with hoisted function declarations

[sophiebits]

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/nice-babbage-hvkm9v?file=%2Fapp%2Fpage.tsx

To Reproduce

1. Have a "use server" function declaration appear in the file later than where it is used, and after the return.

Current vs. Expected behavior

This should work because it would work in normal JS. Instead, the createActionProxy call is inserted after the use and after the return statement.

Do note that the captured variables should not be read at the time the action is referenced but rather (I believe) their final value, which seems the closest thing to when they are called. eg

function Test() {
  let b = <button onClick={foo} />;
  let a = 2;
  return b;

  async function foo() {
    'use server';
    doSomethingWith(a);
  }
}

should presumably call doSomethingWith(2).

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

(didn't test on latest canary because I couldn't get codesandbox to run it, but I read the commit log of packages/next-swc/crates/core/src/server_actions.rs since 13.5.6)

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 16.17.0
  npm: 8.15.0
  Yarn: 1.22.19
  pnpm: 7.1.0
Relevant Packages:
  next: 13.5.6
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

No response

[khuezy]

@shuding piggy backing on this. Server Actions via the client component used to work on 13, see this example: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components

But now, the same setup throws this error:
Uncaught (in promise) TypeError: (0 , _libsql_client_sqlite3__WEBPACK_IMPORTED_MODULE_0__.createClient) is not a function
Where _libsql_client_sqlite3 is whatever library is used in the server action file.

Edit: this appears to be a specific problem w/ the @libsql/client library, perhaps the esm export is causing the issues.

[lubieowoce]

note that the captured variables should not be read at the time the action is referenced but rather (I believe) their final value, which seems the closest thing to when they are called

Not sure how it'd work w/ Next's approach of putting the vars in an array, but if you put them in an object, they can be wrapped in getters. those'll get called at serialization time & thus have the final value. Do you see any other potential isses w/ that @sophiebits?
(One downside of this is that those getters create closures, so it'll be less memory efficient, but i'm not sure if there's a different way to do it that'll respect the JS semantics)

See example in my impl: Input, Output
(Note that my version would also fail the "declare function after return", only thing i fixed is the closed-over vars)

(Also i hope this doesn't sound like i'm hijacking the issue, just working on solving the same problem so i thought discussion here might be useful!)

[shuding]

@khuezy I don't think that error is related to the original reported issue - could you confirm & create a minimal reproduction? Thanks!

[khuezy]

@khuezy I don't think that error is related to the original reported issue - could you confirm & create a minimal reproduction? Thanks!

Hi @shuding I created 2 related to server actions: #57622 and #58112

Thanks for looking into these!

[lubieowoce]

@shuding i don't think that #58391 actually fixes everything here. code analogous to the snippet in the original description is still broken - variables can still be "captured" before they're actually initialized. here's the output i get when running on that version (added a fixture for it):
canary...lubieowoce:next.js:test/eager-capture-error-57392

Notice how x is used before initialization:
https://github.com/lubieowoce/next.js/blob/907077882303b3824a4dbf01a5eacf8694bfe03a/packages/next-swc/crates/core/tests/fixture/server-actions/server/27/output.js#L5-L10

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.