Error during production build with pdfjs-dist. static/media/pdf.worker.min.05101219.mjs from Terser x 'import', and 'export' cannot be used outside of module code

[lancejpollard]

Summary

Getting these when trying to deploy a Next.js 14 app to Vercel on Node.js 20:

Creating an optimized production build ...
--
21:13:41.349 | <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (836kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
21:13:41.398 | Failed to compile.
21:13:41.399 |  
21:13:41.399 | static/media/pdf.worker.min.05101219.mjs from Terser
21:13:41.399 | x 'import', and 'export' cannot be used outside of module code
21:13:41.399 | ,-[78390:1]
21:13:41.399 | 78390 \|     return "function" == typeof e1.postMessage && "onmessage" in e1;
21:13:41.399 | 78391 \| }(self) && WorkerMessageHandler.initializeFromPort(self);
21:13:41.399 | 78392 \| var uc = t.WorkerMessageHandler;
21:13:41.399 | 78393 \| export { uc as WorkerMessageHandler };
21:13:41.399 | : ^^^^^^
21:13:41.399 | `----
21:13:41.399 |  
21:13:41.399 | Caused by:
21:13:41.399 | 0: failed to parse input file
21:13:41.399 | 1: Syntax Error
21:13:41.399 | Error:
21:13:41.399 | x 'import', and 'export' cannot be used outside of module code
21:13:41.400 | ,-[78390:1]
21:13:41.400 | 78390 \|     return "function" == typeof e1.postMessage && "onmessage" in e1;
21:13:41.400 | 78391 \| }(self) && WorkerMessageHandler.initializeFromPort(self);
21:13:41.400 | 78392 \| var uc = t.WorkerMessageHandler;
21:13:41.400 | 78393 \| export { uc as WorkerMessageHandler };
21:13:41.400 | : ^^^^^^
21:13:41.400 | `----
21:13:41.400 |  
21:13:41.400 | Caused by:
21:13:41.400 | 0: failed to parse input file
21:13:41.400 | 1: Syntax Error
21:13:41.400 |  
21:13:41.400 |  
21:13:41.400 | > Build failed because of webpack errors
21:13:41.464 | ELIFECYCLE  Command failed with exit code 1.
21:13:41.481 | Error: Command "pnpm run build" exited with 1

It appears to be coming from pdfjs-dist which I have added through pnpm add pdfjs-dist. Everything works fine locally, I have been able to develop a webpage using pdfjs-dist, but not sure what could be the culprit here. Any ideas?

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:54:51 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6030
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.10.0
Relevant Packages:
  next: 14.0.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.9.5
Next.js Config:
  output: N/A

Example

I didn't add anything fancy to my next.config.ts, it is using what I had before:

/** @type {import('next').NextConfig} */
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin'
import CopyPlugin from 'copy-webpack-plugin'
import createMDXPlugin from '@next/mdx'
import withYaml from 'next-plugin-yaml'
import path from 'path'
import { fileURLToPath } from 'url'
import remarkGfm from 'remark-gfm'
import remarkPrism from 'remark-prism'
import rehypeSlug from 'rehype-slug'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

if (
  process.env.LD_LIBRARY_PATH == null ||
  !process.env.LD_LIBRARY_PATH.includes(
    `${process.env.PWD}/node_modules/canvas/build/Release:`,
  )
) {
  process.env.LD_LIBRARY_PATH = `${
    process.env.PWD
  }/node_modules/canvas/build/Release:${
    process.env.LD_LIBRARY_PATH || ''
  }`
}

const mdxConfig = {
  extension: /\.mdx?$/,
  options: {
    providerImportSource: '@mdx-js/react',
    rehypePlugins: [[rehypeSlug], [rehypeKatex]],
    remarkPlugins: [[remarkPrism], [remarkMath], [remarkGfm]],
  },
}

const withMDX = createMDXPlugin(mdxConfig)

const nextConfig = withYaml(
  withMDX({
    swcMinify: true,
    transpilePackages: [
      'react-syntax-highlighter',
    ],
    pageExtensions: ['mdx', 'md', 'tsx', 'ts'],
    poweredByHeader: false,
    trailingSlash: false,
    webpack: (config, options) => {
      config.experiments = {
        asyncWebAssembly: true,
        syncWebAssembly: true,
        layers: true,
        topLevelAwait: true,
      }
      config.resolve.fallback = {
        fs: false,
        path: false,
        dns: false,
        net: false,
        tls: false,
      }

      config.resolve = {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
        },
        extensions: ['.ts', '.tsx', '.js', '.json'],
      }

      config.plugins ??= []

      if (!options.isServer) {
        config.plugins.push(
          new MonacoWebpackPlugin({
            languages: [
              'json',
              'markdown',
              'css',
              'typescript',
              'javascript',
              'html',
              'graphql',
              'python',
              'scss',
              'yaml',
            ],
            filename: 'static/[name].worker.js',
          }),
        )
      }

      // config.plugins.push(
      //   new CopyPlugin({
      //     patterns: [
      //       {
      //         from: path.resolve(
      //           path.join(
      //             __dirname,
      //             './node_modules/libarchive.js/dist',
      //           ),
      //         ),
      //         to: path.resolve(
      //           path.join(__dirname, './public/libarchive'),
      //         ),
      //         force: true,
      //       },
      //     ],
      //   }),
      // )

      config.module.rules.push({
        test: /\.wasm$/,
        type: 'asset/resource',
      })

      // TODO: improve this function -> track https://github.com/vercel/next.js/issues/25852
      if (options.isServer) {
        config.output.webassemblyModuleFilename =
          './../static/wasm/[modulehash].wasm'
      } else {
        config.output.webassemblyModuleFilename =
          'static/wasm/[modulehash].wasm'
      }

      config.resolve.alias.canvas = false

      config.module.rules.push({
        test: /\.(glsl|vs|fs|vert|frag)$/,
        type: 'asset/source',
      })

      config.module.rules.push({
        test: /\.(txt|node)$/,
        loader: 'raw-loader',
      })

      return config
    },
  }),
)

export default nextConfig

[cyrus-za]

yep I am also running into this. nrwl/nx#21611

[lancejpollard]

I believe I downgraded the version of pdfjs-dist to follow what react-pdf is doing as a workaround: https://github.com/wojtekmaj/react-pdf/blob/95b240d50d1974a5377a88d41f08d1b27781cae2/packages/react-pdf/package.json#L63 and I think I manually copied over some files to a public directory, I should have written it down! But I did get it working lol.

Looks like the only code in my project is this utility:

import { pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url,
).toString()

And that react-pdf version.

[hpardess]

import * as PDFJS from 'pdfjs-dist/build/pdf.min.mjs';
const workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.min.js`;
PDFJS.GlobalWorkerOptions.workerSrc = workerSrc;

[felipenmoura]

import * as PDFJS from 'pdfjs-dist/build/pdf.min.mjs';
const workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.min.js`;
PDFJS.GlobalWorkerOptions.workerSrc = workerSrc;

This one almost did the trick for me.
But the latest version of next/eslint requires it to be an mjs file, not js. Fortunately, the cdn offers the pdf.worker.min.mjs file as well.

[sumagowda]

For me downgrading to react-pdf 8.0.2 solved the issue.

[praveenaj]

Was pulling my hair out until I found the following steps. Finally got it working.
kkomelin/isomorphic-dompurify#54 (comment)

"react-pdf": "8.0.2",
"next": "14.2.3",

[Hellstellar]

For me I don't want to downgrade the pdfjs-dist version as the pdfjs-dist version has high vulnerability in lower versions any other alternative ?

[ahmedbna]

Try pdfjs.GlobalWorkerOptions.workerSrc = //unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs;

[Hellstellar]

I get setting up fake worker failed: "Failed to fetch dynamically imported module"

[Hellstellar]

The above mentioned issue was happening because of csp issues, So the cdn URL for worker solves the problem.

[martinharyanto]

@Hellstellar mind to share what you do to solve it?

[Nishanth-Gobi]

@martinharyanto It's a CORS issue, you can use any one of the below to fix it,

1. Use a CDN that allows CORS
2. Locally download pdf.worker.min.mjs file, you can use it like,

PDFJS.GlobalWorkerOptions.workerSrc = process.env.NODE_ENV === "production"
  ? '//cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.min.mjs`'
  : new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();

3. Have a proxy server in your middleware (better if you want to flexibly choose btw multiple CDNs)

[IonelLupu]

For those who still have this issue, I had to do two things to fix this (I am on Next.js 12.2):

1. set the react-pdf version to 8.0.2

"react-pdf": "8.0.2"

2. Use one of the below methods of loading the worker:

import { Document, Page, pdfjs } from 'react-pdf';

// Method 1
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString();

// Method 2
// const workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
// pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;

Be careful what worker file extension you use. For react-pdf: 8.0.2 , the worker file pdf.worker.min.mjs doesn't work because it doesn't exist. So you need to use pdf.worker.min.js (notice .mjs vs .js).

I think only newer versions of react-pdf support .mjs.