Next.js Discord

Discord Forum

Unexpected identifier '__webpack_async_dependencies__'

Answered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
when i use server action with client component and build project, the error below always shown.

error message
SyntaxError: Unexpected identifier '__webpack_async_dependencies__'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require (/Users/chajinhyeog/workspace/qwarty/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:176:18)
    at __webpack_require__.f.require (/Users/chajinhyeog/workspace/qwarty/.next/server/webpack-runtime.js:247:28)


i also setup next.config.js like below other comments say about this bug.

  experimental: {
    esmExternals: false,
    serverMinification: false,
    serverActions: {
      bodySizeLimit: '100mb'
    }
  }


And i follow up this guids -> https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#passing-additional-arguments

why it is always happen in nextjs 14.1....

i dont know why!!!!

// client component
'use client'

 const saveProductWithData = saveProduct.bind(
    null,
    id,
    ...
  );

...

<form action={saveProductWithData}>


// server action(server component)
'use server'

export async function saveProduct(id) {

await myFunction(id)
...
Answered by Ray
try passing the server action as props to client component. I need to do this with some third party package
View full answer

7 Replies

@Brown bear when i use server action with client component and build project, the error below always shown. error message SyntaxError: Unexpected identifier '__webpack_async_dependencies__' at internalCompileFunction (node:internal/vm:77:18) at wrapSafe (node:internal/modules/cjs/loader:1288:20) at Module._compile (node:internal/modules/cjs/loader:1340:27) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19) at mod.require (/Users/chajinhyeog/workspace/qwarty/node_modules/.pnpm/next@14.1.0_@babel+core@7.23.6_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:65:28) at require (node:internal/modules/helpers:176:18) at __webpack_require__.f.require (/Users/chajinhyeog/workspace/qwarty/.next/server/webpack-runtime.js:247:28) i also setup next.config.js like below other comments say about this bug. ts experimental: { esmExternals: false, serverMinification: false, serverActions: { bodySizeLimit: '100mb' } } And i follow up this guids -> https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#passing-additional-arguments why it is always happen in nextjs 14.1.... i dont know why!!!! // client component ts 'use client' const saveProductWithData = saveProduct.bind( null, id, ... ); ... <form action={saveProductWithData}> // server action(server component) ts 'use server' export async function saveProduct(id) { await myFunction(id) ...
Ray
try passing the server action as props to client component. I need to do this with some third party package
Answer
@Ray try passing the server action as props to client component. I need to do this with some third party package
Cape lion
I have the same error and I'd like to find out what the actual issue here is. What you're suggesting is a workaround, which is great, but, I want to be able to actually import into a client component as the Next and React docs say I should be able to. Using the pass as a prop workaround results in a nasty amount of prop drilling in my case.
until next fix it