NextJS Server Actions Error: Unexpected identifier '__webpack_async_dependencies__'

[asciant]

I tried using libsql-client-ts to access a Turso database with both Prisma and Drizzle ORMs. When using these tools with libsql-client-ts I enountered errors with NextJS 14 Server Actions.

I raised an new issue with Prisma, however after also testing with Drizzle it seems the issue may be coming from libsql-client-ts.

I created a repository with a branch for each ORM:

• Prisma Repo
• Drizzle Repo

Running the create invoice action locally will trigger the issue. It is within the actions.ts file and the action specifically is createInvoice.

There is some additional information available in the issue I raised with Prisma. Worth noting is that the action worked with Prisma after removing the libsql-client-ts driver adapter and running sqlite through a local db file.

Unhandled Runtime Error
Error: Unexpected identifier '__webpack_async_dependencies__'

Call Stack
(action-browser)/./app/lib/db.ts
/Users/asciant/Projects/nextjs-dashboard/.next/server/app/dashboard/invoices/create/page.js (476:1)
__webpack_require__
/Users/asciant/Projects/nextjs-dashboard/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(action-browser)/./app/lib/actions.ts (13:69)
(action-browser)/./app/lib/actions.ts
/Users/asciant/Projects/nextjs-dashboard/.next/server/app/dashboard/invoices/create/page.js (454:1)
Function.__webpack_require__
/Users/asciant/Projects/nextjs-dashboard/.next/server/webpack-runtime.js (33:42)
process.processTicksAndRejections
node:internal/process/task_queues (95:5)
async endpoint
node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-flight-action-entry-loader.js?actions=%5B%5B%22%2FUsers%2Fasciant%2FProjects%2Fnextjs-dashboard%2Fapp%2Flib%2Factions.ts%22%2C%5B%22createInvoice%22%5D%5D%5D&__client_imported__=true! (7:0)
async
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:479)
async tK
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (37:4768)
async ri
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:28770)
async doRender
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js (1343:26)
async cacheEntry.responseCache.get.incrementalCache.incrementalCache
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js (1503:28)
async DevServer.renderToResponseWithComponentsImpl
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js (1411:28)
async DevServer.renderPageComponent
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js (1763:24)
async DevServer.renderToResponseImpl
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js (1801:32)
async DevServer.pipeImpl
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js (854:25)
async NextNodeServer.handleCatchallRenderRequest
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js (266:17)
async DevServer.handleRequestImpl
/Users/asciant/Projects/nextjs-dashboard/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js (751:17)

[srizvi]

I am experiencing the same. I appreciate you @asciant for creating the reproduction repos and look forward to a resolution.

I have this in my next.config.js

  experimental: {
    serverComponentsExternalPackages: ['@prisma/client'],
    serverActions: {
      allowedOrigins: ['localhost:3001'],
    },
  },

Runtime Error

Unhandled Runtime Error
Error: Unexpected identifier

Call Stack
Object.(action-browser)/./app/lib/db.ts
/Users/srs/GitHub/labs/.next/server/app/(routes)/(dashboard)/dashboard/settings/page.js (1215:1)
__webpack_require__
/Users/srs/GitHub/labs/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(action-browser)/./app/lib/auth.ts (12:69)
Module.(action-browser)/./app/lib/auth.ts
/Users/srs/GitHub/labs/.next/server/app/(routes)/(dashboard)/dashboard/settings/page.js (1193:1)
__webpack_require__
/Users/srs/GitHub/labs/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(action-browser)/./app/lib/actions/update-user-name.ts (12:71)
Module.(action-browser)/./app/lib/actions/update-user-name.ts
/Users/srs/GitHub/labs/.next/server/app/(routes)/(dashboard)/dashboard/settings/page.js (1182:1)
Function.__webpack_require__
/Users/srs/GitHub/labs/.next/server/webpack-runtime.js (33:43)
processTicksAndRejections
node:internal/process/task_queues (95:5)
endpoint
node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-flight-action-entry-loader.js?actions=%5B%5B%22%2FUsers%2Fsrs%2FGitHub%2Flabs%2Fapp%2Flib%2Factions%2Fupdate-user-name.ts%22%2C%5B%22updateUserName%22%5D%5D%5D&__client_imported__=true! (7:0)
<unknown>
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/app-render/action-handler.js (330:31)
tX
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/app-render/action-handler.js (205:9)
rl
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/webpack:/next/dist/esm/server/app-render/app-render.js (585:33)
doRender
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/src/server/base-server.ts (2352:20)
cacheEntry.responseCache.get.routeKind
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/src/server/base-server.ts (2590:24)
DevServer.renderToResponseWithComponentsImpl
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/src/server/base-server.ts (2452:24)
DevServer.renderPageComponent
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/src/server/base-server.ts (2970:16)
DevServer.renderToResponseImpl
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/src/server/base-server.ts (3030:24)
DevServer.pipeImpl
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/src/server/base-server.ts (1564:21)
DevServer.NextNodeServer.handleCatchallRenderRequest
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/src/server/next-server.ts (938:7)
DevServer.handleRequestImpl
/Users/srs/GitHub/labs/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/src/server/base-server.ts (1349:9)

[alxgrg]

I've been getting the exact same error with Turso, Drizzle and NextJS 14, but only when I use useFormState in a client component to call the formAction. When I switch the form component back to a server component and call the server action directly it works fine. No idea why.

This works:

app/components/create-form.tsx

import { SubmitButton } from './submit-button';
import { createPost } from '../actions';

export function CreateForm() {
  return (
    <form action={createPost}>
      <input type='text' name='title' />
      <SubmitButton />
    </form>
  );
}

app/actions.ts

export async function createPost(formData: FormData) {
  const validatedFields = insertPostSchema.safeParse({
    title: formData.get('title'),
  });

  if (!validatedFields.success) {
    return {
      error: validatedFields.error.flatten().fieldErrors,
      message: 'Invalid fields',
    };
  }

  const { title } = validatedFields.data;

  try {
    await db.insert(posts).values({
      title,
    });
  } catch (error) {
    console.error(error);
  }

  revalidatePath('/');
}

This gets me the same error you're getting:

app/components/create-form.tsx

'use client';

import { useFormState } from 'react-dom';
import { SubmitButton } from './submit-button';
import { createPost } from '../actions';

export function CreateForm() {
  const [state, formAction] = useFormState(createPost, null);
  
  return (
    <form action={formAction}>
      <input type='text' name='title' />
      <SubmitButton />
    </form>
  );
}

app/actions.ts

export async function createPost(prevState: any, formData: FormData) {
  const validatedFields = insertPostSchema.safeParse({
    title: formData.get('title'),
  });

  if (!validatedFields.success) {
    return {
      error: validatedFields.error.flatten().fieldErrors,
      message: 'Invalid fields',
    };
  }

  const { title } = validatedFields.data;

  try {
    await db.insert(posts).values({
      title,
    });
  } catch (error) {
    console.error(error);
  }

  revalidatePath('/');
}

The useFormState method does work if I swap out Turso and reconfigure drizzle to use another provider like Planetscale or Neon though.

[raymclee]

I've been getting the exact same error with Turso, Drizzle and NextJS 14, but only when I use useFormState in a client component to call the formAction. When I switch the form component back to a server component and call the server action directly it works fine. No idea why.

This works:

app/components/create-form.tsx

import { SubmitButton } from './submit-button';
import { createPost } from '../actions';

export function CreateForm() {
  return (
    <form action={createPost}>
      <input type='text' name='title' />
      <SubmitButton />
    </form>
  );
}

app/actions.ts

export async function createPost(formData: FormData) {
  const validatedFields = insertPostSchema.safeParse({
    title: formData.get('title'),
  });

  if (!validatedFields.success) {
    return {
      error: validatedFields.error.flatten().fieldErrors,
      message: 'Invalid fields',
    };
  }

  const { title } = validatedFields.data;

  try {
    await db.insert(posts).values({
      title,
    });
  } catch (error) {
    console.error(error);
  }

  revalidatePath('/');
}

This gets me the same error you're getting:

app/components/create-form.tsx

'use client';

import { useFormState } from 'react-dom';
import { SubmitButton } from './submit-button';
import { createPost } from '../actions';

export function CreateForm() {
  const [state, formAction] = useFormState(createPost, null);
  
  return (
    <form action={formAction}>
      <input type='text' name='title' />
      <SubmitButton />
    </form>
  );
}

app/actions.ts

export async function createPost(prevState: any, formData: FormData) {
  const validatedFields = insertPostSchema.safeParse({
    title: formData.get('title'),
  });

  if (!validatedFields.success) {
    return {
      error: validatedFields.error.flatten().fieldErrors,
      message: 'Invalid fields',
    };
  }

  const { title } = validatedFields.data;

  try {
    await db.insert(posts).values({
      title,
    });
  } catch (error) {
    console.error(error);
  }

  revalidatePath('/');
}

The useFormState method does work if I swap out Turso and reconfigure drizzle to use another provider like Planetscale or Neon though.

Pass the server action from server component to client component should work. At least, until the issue being fixed

[msmps]

I was able to investigate this issue a little and narrow it down to provide a couple of workarounds

https://github.com/vercel/next.js/issues/57622#issuecomment-1814941581

[alxgrg]

Pass the server action from server component to client component should work. At least, until the issue being fixed

Oh yeah that does work, thanks for the tip.

[nomnivore]

Pass the server action from server component to client component should work. At least, until the issue being fixed

Thank you! It seems the issue lies in server actions being used in "use client" components. In my case, I wasn't using useFormState, but Object.bind to set some parameters (following the official NextJS dashboard app workshop).

[kevinmitch14]

Have you tried experimental: { esmExternals: false } in your next.config?

[KingBael09]

Have you tried experimental: { esmExternals: false } in your next.config?

Wait this actually works!

[ralphilius]

NextJS 14.1.0 works for me.