Error importing formidable in Next.js middleware, works fine in service function
Answered
Lionhead posted this in #help-forum
LionheadOP
I am encountering an issue with importing the formidable library dynamically in a Next.js middleware function. The middleware function is responsible for parsing a file attached to an API request. However, when the formidable library is imported within the middleware, it throws an error related to importing another library inside its package.
Interestingly, when I move the parsing logic to a service function and import formidable there, the library works fine without any errors. This behavior is puzzling, as the code execution path and environment should be similar in both cases.
I would appreciate any insights or suggestions on how to resolve this issue and understand why formidable behaves differently when imported in the middleware versus a service function.
Interestingly, when I move the parsing logic to a service function and import formidable there, the library works fine without any errors. This behavior is puzzling, as the code execution path and environment should be similar in both cases.
I would appreciate any insights or suggestions on how to resolve this issue and understand why formidable behaves differently when imported in the middleware versus a service function.
Answered by joulev
i would make a wrapper function for route handler instead... using middleware for this just feels wrong, but ah well... you can use
request.formData() as shown above to handle forms21 Replies
@Lionhead I am encountering an issue with importing the formidable library dynamically in a Next.js middleware function. The middleware function is responsible for parsing a file attached to an API request. However, when the formidable library is imported within the middleware, it throws an error related to importing another library inside its package.
Interestingly, when I move the parsing logic to a service function and import formidable there, the library works fine without any errors. This behavior is puzzling, as the code execution path and environment should be similar in both cases.
I would appreciate any insights or suggestions on how to resolve this issue and understand why formidable behaves differently when imported in the middleware versus a service function.
perhaps formidable cannot work in the edge runtime. middleware must run on the edge runtime while server functions run on the nodejs runtime by default
LionheadOP
Considering the limitations of the edge runtime in Next.js, I'm exploring options for handling file uploads in my application. Multer, a popular npm package for file uploads, relies on the
fs module, which might not be fully compatible with the edge runtime. Can you provide any insights or guidance on whether Multer is suitable for use in Next.js middleware functions, or if there are alternative approaches you would recommend for handling file uploads in the edge runtime?@Lionhead Considering the limitations of the edge runtime in Next.js, I'm exploring options for handling file uploads in my application. Multer, a popular npm package for file uploads, relies on the `fs` module, which might not be fully compatible with the edge runtime. Can you provide any insights or guidance on whether Multer is suitable for use in Next.js middleware functions, or if there are alternative approaches you would recommend for handling file uploads in the edge runtime?
in middleware you don't need any libraries to parse forms. simply
but why don't you just parse the form in the route directly? why do this in middleware?
export async function middleware(request) {
const form = await request.formData();
const file = form.get("image");
// ...
}but why don't you just parse the form in the route directly? why do this in middleware?
LionheadOP
I chose middleware for file parsing to centralize the logic, avoid code duplication, and simplify API route implementation by attaching parsed data to the request object for easy access in route handlers.
i would make a wrapper function for route handler instead... using middleware for this just feels wrong, but ah well... you can use
request.formData() as shown above to handle formsAnswer
LionheadOP
Sounds good !
LionheadOP
export async function middleware(request) {
const form = await request.formData();
const file = form.get("image");
// ...
}
After parsing my formData in the middleware can I use it in rest of my application ?
const form = await request.formData();
const file = form.get("image");
// ...
}
After parsing my formData in the middleware can I use it in rest of my application ?
I don’t know. Likely no, middleware runs in a separate scope compared to the main application
LionheadOP
Hey @joulev , it's a bit perplexing that while we provide request.formData parsing functionality exclusively in middleware, it poses a challenge in effectively utilizing the parsed form data throughout the application because you can only modify headers in request.
@Lionhead Hey <@484037068239142956> , it's a bit perplexing that while we provide request.formData parsing functionality exclusively in middleware, it poses a challenge in effectively utilizing the parsed form data throughout the application because you can only modify headers in request.
no it isn't exclusive in middleware. it is available in all app router route handlers and pages router edge api routes
you only need multer/formidable in pages router nodejs api routes, because the nodejs
req object doesnt' support the .formData body parsing methodthe native
Request class in browser, edge and modern nodejs do support the .formData method. this is not a nextjs thingand as you can already tell, middleware is not a superfeature for everything. it only does certain things, and for parsing forms, you should not do it there. do it in the route handlers instead.
by the way, if you are using server actions (
"use server"), you can forget about both multer/formidable and .formData. you don't need anything to parse forms in server actionsLionheadOP
In Next.js, when a request is passed through middleware, the formData parsing correctly takes place. However, upon reaching the controller, attempting to invoke request.formData() results in an error stating that formData() is not a function. Why is the request object different within the controller compared to the middleware?
@Lionhead In Next.js, when a request is passed through middleware, the formData parsing correctly takes place. However, upon reaching the controller, attempting to invoke request.formData() results in an error stating that formData() is not a function. Why is the request object different within the controller compared to the middleware?
idk what this controller is. but if you use a nodejs api route in the pages router, the request object is a nodejs
IncomingRequest object which does not have .formData()middleware runs in a different scope compared to api routes and pages. so you get different request object types there, and transferring data between middleware and normal routes is not easy
i think you are overstating the role of the middleware in nextjs. nextjs middleware is not the same as express middleware. while express middleware is powerful and can pass data down easily, nextjs middleware is not for that purpose. you are using the middleware feature wrong.
LionheadOP
But now I don't understand why we have request.formData() in middleware when we can't parse the form and use it in our other functions?
as i told you above. in nextjs middleware the request object is in a different format compared to the api route request object. different formats have different ways to access data. in api route you do
req.body, in middleware you have to do req.json() instead. same for form data, in middleware you can req.formData() but in api route you need a third party libraryLionheadOP
hmm, okay.
That's makes sense,
Thanks !
That's makes sense,
Thanks !