Next.js Discord

Discord Forum

Unexpected identifier '__webpack_async_dependencies__'

Answered
Brown bear posted this in #help-forum
Open in Discord
Avatar
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

Avatar
Ray
try passing the server action as props to client component. I need to do this with some third party package
Answer
Avatar
Brown bearOP
it works! thanks
Avatar
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.
Avatar
Ray
you can still use the import one in the client component but the server action needs to be imported in the page where the component rendered
until next fix it
Avatar
Cape lion
Thanks for the note. So it is a bug then yeah?
Avatar
Ray
I think yes