Does this work in Next js?

[3SCadmin]

I can get this working in node, but when I try to convert it to a Next js 14 server action, I get this error:

⨯ node_modules\pdf-img-convert\node_modules\pdfjs-dist\legacy\build\pdf.js (5903:35) @ eval
⨯ Error: Setting up fake worker failed: "Cannot find module './pdf.worker.js'

[lahammam]

I have the same issue in NestJs
npm WARN deprecated dommatrix@1.0.3: dommatrix is no longer maintained. Please use @thednp/dommatrix. npm ERR! code 1 npm ERR! path /Users/geust/Desktop/lendstack-api/node_modules/canvas npm ERR! command failed npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary npm ERR! Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/geust/Desktop/lendstack-api/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/geust/Desktop/lendstack-api/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@1.0.11 npm ERR! node-pre-gyp info using node@18.18.0 | darwin | arm64 npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not installable for canvas@2.11.2 and node@18.18.0 (node-v108 ABI, unknown) (falling back to source compile with node-gyp) npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.4.0 npm ERR! gyp info using node@18.18.0 | darwin | arm64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.4.0 npm ERR! gyp info using node@18.18.0 | darwin | arm64 npm ERR! gyp info find Python using Python version 3.9.6 found at "/Applications/Xcode.app/Contents/Developer/usr/bin/python3" npm ERR! gyp info spawn /Applications/Xcode.app/Contents/Developer/usr/bin/python3 npm ERR! gyp info spawn args [ npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py', npm ERR! gyp info spawn args 'binding.gyp', npm ERR! gyp info spawn args '-f', npm ERR! gyp info spawn args 'make', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/geust/Desktop/lendstack-api/node_modules/canvas/build/config.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/geust/Library/Caches/node-gyp/18.18.0/include/node/common.gypi', npm ERR! gyp info spawn args '-Dlibrary=shared_library', npm ERR! gyp info spawn args '-Dvisibility=default', npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/geust/Library/Caches/node-gyp/18.18.0', npm ERR! gyp info spawn args '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp', npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/geust/Library/Caches/node-gyp/18.18.0/<(target_arch)/node.lib', npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/geust/Desktop/lendstack-api/node_modules/canvas', npm ERR! gyp info spawn args '-Dnode_engine=v8', npm ERR! gyp info spawn args '--depth=.', npm ERR! gyp info spawn args '--no-parallel', npm ERR! gyp info spawn args '--generator-output', npm ERR! gyp info spawn args 'build', npm ERR! gyp info spawn args '-Goutput_dir=.' npm ERR! gyp info spawn args ] npm ERR! /bin/sh: pkg-config: command not found npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error:gyp` failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:325:16)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:517:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:292:12)
npm ERR! gyp ERR! System Darwin 23.0.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/geust/Desktop/lendstack-api/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/geust/Desktop/lendstack-api/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
npm ERR! gyp ERR! cwd /Users/geust/Desktop/lendstack-api/node_modules/canvas
npm ERR! gyp ERR! node -v v18.18.0
npm ERR! gyp ERR! node-gyp -v v9.4.0
npm ERR! gyp ERR! not ok
npm ERR! node-pre-gyp ERR! build error
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/geust/Desktop/lendstack-api/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/geust/Desktop/lendstack-api/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp ERR! stack at ChildProcess. (/Users/geust/Desktop/lendstack-api/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:517:28)
npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1098:16)
npm ERR! node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:303:5)
npm ERR! node-pre-gyp ERR! System Darwin 23.0.0
npm ERR! node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/geust/Desktop/lendstack-api/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/geust/Desktop/lendstack-api/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.18.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in: /Users/geust/.npm/_logs/2024-03-19T00_55_01_156Z-debug-0.log
`

[jakate]

I can get this working in node, but when I try to convert it to a Next js 14 server action, I get this error:

⨯ node_modules\pdf-img-convert\node_modules\pdfjs-dist\legacy\build\pdf.js (5903:35) @ eval ⨯ Error: Setting up fake worker failed: "Cannot find module './pdf.worker.js'

For the original question, I think you can make it work by adding the dependecy on next.config

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['pdf-img-convert'],
  },
};

export default nextConfig;

[jakate]

I can get this working in node, but when I try to convert it to a Next js 14 server action, I get this error:
⨯ node_modules\pdf-img-convert\node_modules\pdfjs-dist\legacy\build\pdf.js (5903:35) @ eval ⨯ Error: Setting up fake worker failed: "Cannot find module './pdf.worker.js'

For the original question, I think you can make it work by adding the dependecy on next.config

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['pdf-img-convert'],
  },
};

export default nextConfig;

Okay, seems like this does not work anymore

[AryashDubey]

Were you able to solve it?

[jakate]

I got it working.

This was the next.config.mjs changes I did:

const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: [
      'pdf-img-convert',
    ],
    outputFileTracingIncludes: {
      '/': [
        './node_modules/pdf-img-convert/node_modules/pdfjs-dist/legacy/build/pdf.worker.js',
        './node_modules/pdf-img-convert/node_modules/pdfjs-dist/legacy/build/pdf.js',
      ],
    },
  },
}

And using node version 21

[AryashDubey]

Thank you so much man! That worked for me :)

[murtazabaanihali]

This worked for me.

By changing next.config.js or next.config.mjs

const nextConfig = {
    experimental: {
        serverComponentsExternalPackages: [
            'pdfjs-dist',
            'pdf-img-convert'
        ],
        outputFileTracingIncludes: {
            '/': [
                './node_modules/pdfjs-dist/legacy/build/pdf.worker.js',
                './node_modules/pdfjs-dist/legacy/build/pdf.js',
            ],
        },
    }
}

[ysqander]

Thanks @jakate , I spent a few hours on this!!

[Trevor-M-Williams]

I got it working.

This was the next.config.mjs changes I did:

const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: [
      'pdf-img-convert',
    ],
    outputFileTracingIncludes: {
      '/': [
        './node_modules/pdf-img-convert/node_modules/pdfjs-dist/legacy/build/pdf.worker.js',
        './node_modules/pdf-img-convert/node_modules/pdfjs-dist/legacy/build/pdf.js',
      ],
    },
  },
}

And using node version 21

This works in development but is failing for me in prod.

Error: Setting up fake worker failed: "Cannot find module './pdf.worker.js'
Require stack:
- /var/task/node_modules/.pnpm/pdfjs-dist@2.16.105/node_modules/pdfjs-dist/legacy/build/pdf.js
- /var/task/node_modules/.pnpm/pdf-img-convert@1.2.1_encoding@0.1.13/node_modules/pdf-img-convert/pdf-img-convert.js
- /var/task/.next/server/app/dashboard/files/[fileSlug]/page.js
- /var/task/node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/server.runtime.prod.js
- /var/task/___next_launcher.cjs
- /opt/rust/nodejs.js".
    at /var/task/node_modules/.pnpm/pdfjs-dist@2.16.105/node_modules/pdfjs-dist/legacy/build/pdf.js:5903:36
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Would the file path be different after building?

[jakate]

I'm running my app on Vercel and it seems to work with that config just fine.

[Trevor-M-Williams]

@jakate Is your repo public? I'd love to take a look

[jakate]

I'm sorry, it's not public, so I can't really share that 😕

[alexbacanu]

I also encountered some issues with this, but since I was using pnpm in my setup, I had to make a few changes to get it working on Vercel. Here's my configuration:

experimental: {
  serverComponentsExternalPackages: ['pdf-img-convert'],
  outputFileTracingIncludes: {
    '/api/convert-to-img': [
      './node_modules/.pnpm/pdfjs-dist*/node_modules/pdfjs-dist/legacy/build/pdf.worker.js',
      './node_modules/.pnpm/pdfjs-dist*/node_modules/pdfjs-dist/legacy/build/pdf.js',
    ],
  },
},

Note the * after pdfjs-dist because the path looks something like this: /var/task/node_modules/.pnpm/pdfjs-dist@2.16.105/node_modules/pdfjs-dist/legacy/build/pdf.js.

[SebastienPingal]

@jakate @alexbacanu you saved me there, thanks

[BlakeBrown]

Wasn't able to get this working, error was

import fetch from 'node-fetch';
^^^^^^

SyntaxError: Cannot use import statement outside a module