Unable to build with webpack 5

[Qualphey]

I am trying to use pdfjs-dist in a webpack script:

const PDFJS = require("pdfjs-dist/webpack");

var loadingTask = PDFJS.getDocument('hello.pdf');
loadingTask.promise.then(function(pdf) {
  console.log(pdf);
  // you can now use *pdf* here
});

Though it fails to build dumping an error:

./node_modules/worker-loader/dist/cjs.js!./node_modules/pdfjs-dist/build/pdf.worker.js
ModuleBuildError: Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
Error: MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)

I understand that MainTemplate.hooks.hotBootstrap has been removed in webpack 5, but is there a workaround for this? Are there any plans to support the latest webpack version?

[timvandermeij]

I'm a bit confused because we already switched to Webpack 5, see https://github.com/mozilla/pdf.js/blob/master/package.json#L61, and hotBootstrap is not something we use in our codebase. Are you sure this is a PDF.js issue and not something caused by another dependency?

[timvandermeij]

Closing since this doesn't seem to be caused by PDF.js directly and there has been no response.

[cabello]

I am having similar issues, I attempted to add tailwind to a project, that resulted in a bunch of package upgrades including "pdfjs-dist": "^2.12.313", and "react-scripts": "^5.0.0",.

As a result this is the stack I receive:

Compiled with problems:

ERROR in ./node_modules/pdfjs-dist/build/pdf.worker.js (./node_modules/worker-loader/dist/cjs.js?esModule=false&filename=[name].[contenthash].js!./node_modules/pdfjs-dist/build/pdf.worker.js)

Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
Error: MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)
    at Object.tap (/Users/cabello/workspace/some-project/node_modules/react-scripts/node_modules/webpack/lib/MainTemplate.js:215:12)
    at WebWorkerMainTemplatePlugin.apply (/Users/cabello/workspace/some-project/node_modules/webpack/lib/webworker/WebWorkerMainTemplatePlugin.js:139:35)
    at /Users/cabello/workspace/some-project/node_modules/webpack/lib/webworker/WebWorkerTemplatePlugin.js:16:39
    at Hook.eval [as call] (eval at create (/Users/cabello/workspace/some-project/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/cabello/workspace/some-project/node_modules/react-scripts/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/cabello/workspace/some-project/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:1054:30)
    at /Users/cabello/workspace/some-project/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:1099:29
    at Hook.eval [as callAsync] (eval at create (/Users/cabello/workspace/some-project/node_modules/react-scripts/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/cabello/workspace/some-project/node_modules/react-scripts/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/Users/cabello/workspace/some-project/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:1094:28)
    at Compiler.runAsChild (/Users/cabello/workspace/some-project/node_modules/react-scripts/node_modules/webpack/lib/Compiler.js:543:8)
    at runAsChild (/Users/cabello/workspace/some-project/node_modules/worker-loader/dist/supportWebpack5.js:11:26)
    at Object.pitch (/Users/cabello/workspace/some-project/node_modules/worker-loader/dist/index.js:95:33)

I am going over the internet finding posts, so far no solution that applies to my use case.

[tiagomalheiro]

Similar issues here too!

Without worker-loader installed (since webpack 5 has different handling of webworkers):

ERROR in ./node_modules/pdfjs-dist/webpack.js 19:20-114
Module not found: Error: Can't resolve 'worker-loader' in '<project-path>\node_modules\pdfjs-dist'

With worker-loader installed:

ERROR in ./node_modules/pdfjs-dist/build/pdf.worker.js (./node_modules/worker-loader/dist/cjs.js?esModule=false&filename=[name].[contenthash].js!./node_modules/pdfjs-dist/build/pdf.worker.js)
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: chunkFilename.replace is not a function
    at getDefaultChunkFilename (<project-path>\node_modules\worker-loader\dist\utils.js:23:24)
    at Object.pitch (<project-path>\node_modules\worker-loader\dist\index.js:61:108)

[yangjuantest]

have you resolved this problem? I have similar issues!

[tiagomalheiro]

have you resolved this problem? I have similar issues!

No. I am doing a workaround, just hard declare the versions I want to use and load from a cdn

[WMcKibbin]

Having this same issue using vue cli 5. I searched the code and I do not see any reference to this hotBootstrap anywhere in the pdf.js codebase very perplexing. If anyone has any tips or tricks to getting past this I would greatly appreciate it

[bvdalling]

@WMcKibbin I am currently running into the same issue. Running Webpack@5.86.0 and vue-cli@5.0.8. I'm also receiving the error:

 ERROR  Failed to compile with 1 error                                               10:22:16 AM

 error  in ./node_modules/pdfjs-dist/es5/build/pdf.worker.js

Syntax Error: Error: MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)

After doing some looking it does seem to originate from pdfjs-dist. However, the repository for this package lacks public issues.

[bvdalling]

So, it seems that this only occurs when the loader itself is improperly loaded. Make sure to use the

import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;

In my case, with Vue-Pdf:

vuePdfNoSss.vue

<style src="./annotationLayer.css"></style>
<script>
import componentFactory from './componentFactory.js'
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

if ( process.env.VUE_ENV !== 'server' ) {
    let component = componentFactory({});
    let pdfjsWrapper = require('./pdfjsWrapper.js').default;
    let PDFJS = require('pdfjs-dist/es5/build/pdf.js');

    if (
        typeof window !== 'undefined'
        && 'Worker' in window
        && navigator.appVersion.indexOf('MSIE 10') === -1
    ) {
        PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker
    }

    component = componentFactory(pdfjsWrapper(PDFJS));
}

export default component;
</script>

It's probably important to note that unless you use something like patch-package this will not be fixed when you deploy.