14.0.0 Server Actions webpack issues

[khuezy]

Link to the code that reproduces this issue

The latest canary server actions no longer works in VM due to host/origin check, so here's a GH repo: https://github.com/khuezy/server_actions_bug

https://codesandbox.io/p/sandbox/practical-silence-zgrvzc

To Reproduce

1. Go to https://codesandbox.io/p/sandbox/practical-silence-zgrvzc
2. Open the /app/page.tsx file and see instructions
3. Click "Click me" button on the app to see the pop up, everything is fine.
4. Comment out the Scenario1 (happy path) and uncomment the Scenario2 block, save file and wait for app to reload
5. Click "Click me" and see error in the terminal
6. Comment out the Scenario2 and uncomment the Scenario3 block, save file and wait for app to reload
7. Click "Click me" and see new error in the terminal

Current vs. Expected behavior

In Next 13.5.6, server actions did not have any issues with webpack. In Next 14.0.0 is broken with webpack importing certain libraries

Verify canary release

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

Provide environment information

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

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

App Router

Additional context

v14.0.1-canary.0 only contains a docs change. v14.0.2-canary.10 still broken

_NEXT-1711

[raymclee]

just tried with 14.0.2-canary.5 and the issue still exists

[raymclee]

if you pass the server action to the client component as prop, it will work even the client component still using the imported function

[raymclee]

14.0.2-canary.11 fixed this

[khuezy]

I can't update the sandbox b/c .11+ doesn't work in VM clouds due to the origin/host mismatching. I tried locally w/ .12 and .11 and both fails, see: https://github.com/khuezy/server_actions_bug

[msmps]

I'm unsure if it's directly related but I too am facing this issue with 14+ and most recently tested on 14.0.3-canary.11

I'm attempting to use server actions with drizzle, turso and @libsql/client which results in the following:

✓ Compiled /post/[slug] in 533ms (766 modules)
⨯ lib/db.ts (7:32) @ eval
⨯ TypeError: (0 , _libsql_client__WEBPACK_IMPORTED_MODULE_0__.createClient) is not a function
   at eval (./lib/db.ts:12:80)
   at Object.(action-browser)/./lib/db.ts (/Users/redacted/.next/server/app/post/[slug]/page.js:319:1)
   at __webpack_require__ (/Users/redacted/.next/server/webpack-runtime.js:33:42)
   at eval (./app/actions.ts:8:68)
   at Object.(action-browser)/./app/actions.ts (/Users/redacted/.next/server/app/post/[slug]/page.js:246:1)
   at Function.__webpack_require__ (/Users/redacted/.next/server/webpack-runtime.js:33:42)
  5 | import * as schema from "./schema";
  6 |
>  7 | const connection = createClient({
    |                                ^
  8 |   url: process.env.DATABASE_URL,
  9 |   authToken: process.env.DATABASE_AUTH_TOKEN,
 10 | });

[msmps]

I've investigated the issue I mentioned above and found that it seems to have been introduced sometime between versions 13.5.6-canary.7 and 13.5.6-canary.8. This conclusion comes from the observation that .7 functions correctly, while .8 does not.

I suspect it's directly related to this commit. I was able to use pnpm patch to revert a fraction of this specific commit, the issue appears to resolve 🤔.

Here's the gist for anyone interested in testing it (or you can temporarily disable esmExternals)

https://gist.github.com/msmps/19b28a2b2624e7fe81641abe4704e891

cc @shuding as assignee

[khuezy]

I've confirm the latest canary fixes the issues. Thanks!

[huozhi]

The fix is also landed in 14.0.4 now

[YugandharrPatil]

I too am using turso, next and drizzle and when i'm importing the db from the connection file into a component to perform db.insert on it, I'm getting this error.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

MIT License | | Copyright (c) 2023 libSQL

This is probably a webpack issue. Any possible fixes?

[github-actions[bot]]

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.