Fix PDF Parse Error In Next.js With Bun: A Simple Guide

Alex Johnson

-Oct 9, 2025

Fix PDF Parse Error In Next.js With Bun: A Simple Guide

Fixing 'Attempted Import Error' with PDF Parse in Next.js and Bun

Hey guys! Running into that pesky "Attempted import error" when trying to use pdf-parse in your Next.js project with Bun? You're not alone! This error, specifically complaining about pdfjs-dist/legacy/build/pdf.worker.mjs?url not having a default export, can be a real head-scratcher. But don't worry, we'll break it down and get you back on track. Let's dive in!

Understanding the Issue

First off, let's understand why this error pops up. The pdf-parse library relies on pdfjs-dist, which is the JavaScript implementation of the PDF reader from Mozilla. The worker file, pdf.worker.mjs, handles heavy tasks in a separate thread, preventing your main thread from freezing up – crucial for a smooth user experience. The error message indicates that Next.js isn't correctly handling the import of this worker file, especially when using Bun as your runtime. This often boils down to how modules are resolved and bundled in your environment.

The core problem lies in how Next.js (or your build system) is trying to import the worker module. The ?url suffix is meant to tell the bundler (like Webpack, which Next.js uses under the hood) to treat the file as a URL. This is important because the worker needs to be loaded as a separate file in the browser, not directly included in your main JavaScript bundle. When the bundler fails to correctly process this ?url import, it tries to import the file as a regular module, which leads to the "no default export" error. This is because worker files typically don't have a default export; they expose their functionality through a different API.

Another potential cause of this issue is related to the configuration of your Next.js project. If you're using a custom webpack configuration, or if you have any plugins that modify the module resolution process, it's possible that these configurations are interfering with the correct handling of the ?url import. Similarly, if you're using a non-standard setup with Bun, it's crucial to ensure that Bun is correctly configured to handle assets and worker files. This might involve adjusting your bunfig.toml file or any other relevant configuration files.

Finally, it's worth noting that this issue can sometimes be triggered by outdated dependencies. If you're using an older version of pdf-parse, pdfjs-dist, or Next.js, it's possible that the issue has already been resolved in a newer version. Therefore, one of the first steps you should take when encountering this error is to update all your relevant dependencies to the latest versions. This can often resolve compatibility issues and ensure that you're using the most up-to-date code.

Solutions to the Rescue

Okay, enough talk about the problem – let's fix it! Here are a few approaches you can try:

1. Configure `next.config.js`

One common solution involves tweaking your next.config.js file to handle the worker file correctly. You'll need to use a Webpack configuration to achieve this. Here’s how you can do it:

// next.config.js
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.module.rules.push({
        test: /pdfjs-dist\/build\/pdf\.worker\.min\.js$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              publicPath: '/_next/static/chunks',
              outputPath: 'static/chunks',
            },
          },
        ],
      });
    }
    return config;
  },
};

module.exports = nextConfig;

Explanation:

We're modifying the Webpack configuration through next.config.js.
We add a rule that targets the pdf.worker.min.js file.
We use file-loader to handle this file, which tells Webpack to treat it as a separate asset.
The options specify how the file should be named and where it should be placed in the output directory.

2. Dynamic Imports

Another approach is to use dynamic imports. This can sometimes help Next.js handle the module loading more gracefully:

async function loadPDFParser() {
  const pdfParse = await import('pdf-parse');
  return pdfParse;
}

// Usage
loadPDFParser().then(pdfParse => {
  // Use pdfParse here
});

This ensures that the pdf-parse module is loaded asynchronously, which can sometimes resolve issues with module resolution.

3. Check Your Dependencies

Make sure your dependencies are up-to-date. Run:

npm update pdf-parse pdfjs-dist
# or
yarn upgrade pdf-parse pdfjs-dist

Outdated packages can sometimes cause unexpected issues.

4. Environment Variables

Sometimes, the issue can be related to how environment variables are set up. Ensure that any environment variables required by pdf-parse or pdfjs-dist are correctly configured in your Next.js project.

5. Server-Side Only

If you're only using pdf-parse on the server-side (e.g., in an API route), ensure that you're not trying to import it in client-side components. This can cause issues because the worker file is not meant to be run in the browser's main thread.

6. Bun Specific Configuration

Since you're using Bun, ensure that it's configured correctly to handle assets. Check your bunfig.toml file (if you have one) and ensure that it correctly handles static assets and worker files.

7. Alias configuration

In your next.config.js, add a resolve alias to force usage of the esm module. Add the following to the webpack configuration. This ensures that the correct module is used, which is compatible with the Next.js and bun.

 webpack: (config) => {
      config.resolve.alias = {
        ...config.resolve.alias,
        'pdfjs-dist': 'pdfjs-dist/lib/es5/build/pdf.js',
      };

      return config;
    },

Example Implementation

Let's put it all together with a simple example in a Next.js API route:

// src/app/api/pdf-parse/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  try {
    const pdfParse = (await import('pdf-parse')).default;
    const formData = await req.formData();
    const file = formData.get('file') as Blob | null;

    if (!file) {
      return NextResponse.json({ error: 'No file provided' }, { status: 400 });
    }

    const buffer = await file.arrayBuffer();

    const data = await pdfParse(buffer);

    return NextResponse.json({ data });
  } catch (error) {
    console.error('Error parsing PDF:', error);
    return NextResponse.json({ error: 'Failed to parse PDF' }, { status: 500 });
  }
}