CODEWITHSUNDEEP
pdfnext.jspdfparser
frankBang
frankBang

Reputation: 337

Read pdf-content in next.js 13 api route-handler results in 404

I have followed this tutorial (https://www.youtube.com/watch?v=enfZAaTRTKU) on youtube which teaches one how to upload a pdf-file a to an express server and read out its content.

I do not want to display the pdf - I only care about the text.

I have followed the tutorial and it all works for me with the express environment but when I try to do the same with the next.js route handlers it just sends me back a 404 as soon as I call pdfParse()

import pdfParse from 'pdf-parse'

import { NextResponse, type NextRequest } from 'next/server';
 
export async function POST(request: NextRequest) {
    const formData = await request.formData();
    const file = formData.get('pdf');
    

    //console.log(file) -- works fine

    // causes the server to send a 404
    const pdfData = await pdfParse(file)

    // it never gets here
    return NextResponse.json({"message": "Error"})
    
}

does anyone know how to deal with this? I would like to avoid having to run a express server just for this.

Upvotes: 1

Views: 1421

Answers (4)

Bernd Holbein
Bernd Holbein

Reputation: 11

You can opt out specific bundles with compatibility issues from the server components bundling in next.js https://nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages

So adding

 const nextConfig = {
      experimental: {},
      serverExternalPackages: ["pdf-parse"],
    };

should work.

Upvotes: 0

Z T
Z T

Reputation: 1

I tried to follow Ervin and Roja's solutions, but I still get the following error:

Could not find a declaration file for module 'pdf-parse/lib/pdf-parse'. '/Users/.../node_modules/pdf-parse/lib/pdf-parse.js' implicitly has an 'any' type. Try npm i --save-dev @types/pdf-parse if it exists or add a new declaration (.d.ts) file containing `declare module 'pdf-parse/lib/pdf-parse'

I solved it by creating a file pdf-parse.d.ts (in the same directory as my /api/parse/route.ts):

// pdf-parse.d.ts
declare module "pdf-parse/lib/pdf-parse" {
  const pdfParse: any; // Adjust with actual function or class signature if known.
  export default pdfParse;
}

Then the code works:

// api/parse/route.ts
import pdf from "pdf-parse/lib/pdf-parse";

pdf(buffer).then(...); // works fine

Upvotes: 0

Roja Hosseini
Roja Hosseini

Reputation: 1

I was working on a same project what I've understand is that in the Next.js, parsing the pdf must happen in a server component so I used api to process the pdf as you did too.

1. to solve the 404 error in your api fetch importing the "pdf-parse" library like below should do it:

import parse from "pdf-parse/lib/pdf-parse";

for your code exactly :

import pdfParse from 'pdf-parse/lib/pdf-parse'

2.second thing that i faced which may help you too use buffer if you are handleing a large file

3.and also i tried passing the file path to the api instead of the file itself

if you are interested in number 2, 3 i can explain more.

Upvotes: 0

Ervin Cahyadinata Sungkono
Ervin Cahyadinata Sungkono

Reputation: 31

replace the import with the following

import pdf from 'pdf-parse/lib/pdf-parse'

and change pdfParse(file) to pdf(file)

This issue exists because there is a test file in the published library

if (isDebugMode) {
let PDF_FILE = './test/data/05-versions-space.pdf';
let dataBuffer = Fs.readFileSync(PDF_FILE);
Pdf(dataBuffer).then(function(data) {
    Fs.writeFileSync(`${PDF_FILE}.txt`, data.text, {
        encoding: 'utf8',
        flag: 'w'
    });
    debugger;
}).catch(function(err) {
    debugger;
});
}

You can read more about it here

Upvotes: 3

Related Questions