Unexpected identifier '__webpack_async_dependencies__'
Answered
Brown bear posted this in #help-forum
Brown bearOP
when i use server action with client component and build project, the error below always shown.
error message
i also setup next.config.js like below other comments say about this bug.
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
// server action(server component)
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
7 Replies
try passing the server action as props to client component. I need to do this with some third party package
Answer
Brown bearOP
it works! thanks
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.
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
Cape lion
Thanks for the note. So it is a bug then yeah?
I think yes