search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.67k stars 26.61k forks source link

Error `TypeError: e._formData.get is not a function` while running serverAction in client component, only on dev env #60687

Open Justinyu1618 opened 7 months ago

Justinyu1618 commented 7 months ago

Link to the code that reproduces this issue

https://github.com/Justinyu1618/nextjs-issue-test

To Reproduce

The issue happens inconsistently, and only when running the dev server. Try running a server action inside a client component. You may need to make a few edits or have the dev server continuously running for a while.

  1. Clone the attached repo, which runs a server action inside a client component
  2. yarn dev
  3. Try refreshing the page several times, or make some edits. At some point, the issue may occur. After the issue occurs, any calls to serverActions are broken

Current vs. Expected behavior

Expected behavior: the server action is run

Current behavior: The dev server sometimes gets into a state where it will throw this error (below) whenever a server action is called from inside a client component. Sometimes, rerunning the dev server fixes it but not always. It doesn't matter what the server action is doing, it will continue throwing this error. If you yarn build && yarn start, the issue no longer exists 

TypeError: e._formData.get is not a function
    at tn (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:303107)
    at t.decodeReply (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:306681)
    at /Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:284
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async t0 (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773)
    at async rh (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636)
    at async doRender (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/server/base-server.js:1391:30)
    at async cacheEntry.responseCache.get.routeKind (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/server/base-server.js:1552:28)
    at async DevServer.renderToResponseWithComponentsImpl (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/server/base-server.js:1460:28)
    at async DevServer.renderPageComponent (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/server/base-server.js:1843:24)
    at async DevServer.renderToResponseImpl (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/server/base-server.js:1881:32)
    at async DevServer.pipeImpl (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/server/base-server.js:909:25)
    at async NextNodeServer.handleCatchallRenderRequest (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/server/next-server.js:266:17)
    at async DevServer.handleRequestImpl (/Users/justinyu/Documents/work/counsel/counsel-main/node_modules/next/dist/server/base-server.js:805:17)

Verify canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:58 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6020
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.0.5-canary.58
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Not sure, App Router, Data fetching (gS(S)P, getInitialProps)

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

next dev (local)

Additional context

The error is not consistent. It only comes after working for a bit on the dev server. It does not go away if I try removing the .next folder. It also does not go away if I try to clear cache

jklinehamer commented 7 months ago

I've completely torn my project apart trying to fix this one.

Switched from pnpm back to npm, tried every version of Node, canary. Were you able to fix it? Has to be the most frustrating bug I've ever encounter.

xmaniaxz commented 7 months ago

I ran into this one as well and i eventually swapped over to using appwrite on client side only. This seems to work perfectly. Only thing you have to do is to set the permission on your appwrite database

Justinyu1618 commented 7 months ago

Still getting this issue. We ended up switching all of our server actions to route handlers, but it's super not ideal.

Any updates on a solution?

gvillenave commented 6 months ago

We're experiencing the same issue, it reproduces consistently when reloading the page (as opposed to navigation using the Next router, which works fine, supposedly because it doesn't call the server action).

antho1404 commented 6 months ago

I can reproduce something similar with the Twilio Client @twilio/conversations. Anytime this client is created and used anywhere on the page, all the calls to server actions throw this error.

PS: To fully test when it breaks, I need to consistently delete the stop the dev server, delete the .next directory, and restart. If I do not delete the .next, I can't reproduce the error. PS2: The same errors occur once deployed on Vercel, so it is not dev only (but this may be related to the cache when deploying)

antho1404 commented 6 months ago

One workaround I found is to load this dependency directly from their CDN with a classic <script src="..." /> import and not bundled within the app with an import/require. By doing so, there is no issue anymore, so I guess this is somehow related to a bundle issue.

daklod2k3 commented 6 months ago

can you give more info how to fix it, I have the same issue

pedrobando commented 6 months ago

Same issue here

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

imadityadi commented 5 months ago

getting same error Error: e._formData.get is not a function

antho1404 commented 5 months ago

After spending quite some time debugging this issue I finally found the source of the problem. Unfortunately, nothing can really be fixed in next as the issue is related to the library imported (in this case, @twilio/conversation or appwrite). These libraries import the isomorphic-form-data library, which overrides the FormData with an invalid object.

This only happens when the library is imported, as this dependency is then loaded.

One solution to fix this is to "override" this library with Webpack.

In your next.config.js you can add the following

const webpack = require("webpack");
const nextConfig = {
  ...
  webpack(config) {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(
        /^isomorphic-form-data$/,
        `${config.context}/form-data-mock.js`
      )
    );
    return config;
  },
};

and you can create an empty form-data-mock.js file at the root of your project that will be loaded instead of "isomorphic-form-data"

With this you can now import the libraries and use server actions with no problems anymore 🎉

imadityadi commented 5 months ago

I ran into this one as well and i eventually swapped over to using appwrite on client side only. This seems to work perfectly. Only thing you have to do is to set the permission on your appwrite database

I am just newbie , this question popped in my mind So , do you get session again and and again to check if user is logged in or not ?, let's say you have to show a button in the nav bar then how will you get authStatus , if you use appwrite's method to getloggedIn user, it would be very expensive as the navbar will load multiple time in the app,

imadityadi commented 5 months ago

I am also encountering this issue , I am using appwrite for auth and trying to save the session using next cookies , i tried using iron-session as well, but as the actions are not working I am not able to do that .

r3cursiv3ly commented 5 months ago

@antho1404 I just want to thank you for posting a solution that works beautifully. I was ready to give up on server actions with appwrite. My only lingering question is how best to address this with maintainers of Appwrite. I have never opened an issue before and it seems that they have marked many of the complaints regarding the "TypeError: e._formData.get is not a function" error as resolved. I have not seen a single other person trace the problem to isomorphic form data. It would be really nice to not have to install webpack and generate a dummy file.

r3cursiv3ly commented 5 months ago

@antho1404 - I'm also curious how you figured out the problem. Very impressive...I'm self-taught but wish I could be on your level.

toon159 commented 5 months ago

@antho1404 Thank you for the solution! I was using appwrite, but I completely forgot about it. After removing appwrite, everything working smoothly.

r3cursiv3ly commented 5 months ago

@toon159 What did you end up using instead of Appwrite? I gave Firebase a whirl but ran into similarly frustrating issues.

toon159 commented 4 months ago

@r3cursiv3ly This is just a hobby project where I need to store some images, so decided to try Cloudinary. Next project I'm definitely going with Supabase.

Ronit-gurjar commented 4 months ago

It didn't worked for me. guess i am removing appwrite for now. tried everything mentioined above but got one error for another. any suggestion ? or should i build my backend and mongodb like always😵

this is what i got, and after doing what 👆@antho1404 said, i was getting this error:-

which i don't know why this happended, as i checked every way (creating a separate file for actions || passing through server component in a client comp).

so i believe the reason might be as mentioned by 👆@antho1404, that overriding of formData. looked in Appwrite's repo for same or similar issue but couldn't find.

antho1404 commented 4 months ago

@r3cursiv3ly I'm not familiar with appwrite structure, but I wouldn't be surprised that they have a github to collect feedback so feel free to create an issue on their repo and link this issue for reference. As for how I figured out the problem, it was by going in debugger mode inside the nextjs code to see where the issue occurred and, from that, try to compare why, in some cases/pages, it worked, and why, in some other, it wouldn't work then I notice the form data object was different then I wanted to see which one was used and I found this isomorphic library.

@Ronit-gurjar, it looks like the fix worked, but you still have application-related issues. I would suggest identifying which action is triggering this error and checking all the data sent; you probably have null data or a nonplain object. If using appwrite, I wouldn't be surprised that the objects from appwrite contain a lot of things in or are classes. Try to pass the ID of the object, for example, instead of the object itself

MaxLiebsch commented 4 months ago

@antho1404 dear, impressive! Can you explain your debug setup?

I feel like I can learn a ton from you. I was feeling left of with the error message and I tried looking into the files where the error was triggered, but I could make sense from the bundled nextjs code.

I would greatly appreciate it.

loks0n commented 3 months ago

@antho1404 I just want to thank you for posting a solution that works beautifully. I was ready to give up on server actions with appwrite. My only lingering question is how best to address this with maintainers of Appwrite. I have never opened an issue before and it seems that they have marked many of the complaints regarding the "TypeError: e._formData.get is not a function" error as resolved. I have not seen a single other person trace the problem to isomorphic form data. It would be really nice to not have to install webpack and generate a dummy file.

Hey there, Appwrite dev here. I've created a PR to address this: https://github.com/appwrite/sdk-generator/pull/834

We'll release soon, and you will be able to remove the workaround.