react-pdf: Cannot find module 'worker-loader!./build/pdf.worker.js'

Not to hijack the issue but this issue seems to happen when running tests via Jest as well. We have a component that uses react-pdf, and any test that has this component fails for the same "Cannot find module ‘worker-loader!./build/pdf.worker.js’ from ‘webpack.js’ " error.

Do you know if there is something we need to setup to ensure testability? Definitely want the performance benefits but don’t want the lack of testability. If you need more detail let me know and I’ll do what I can!

Thanks!

EDIT: Turns out the easiest way to fix it was https://github.com/webpack-contrib/worker-loader/issues/10#issuecomment-325977537

@tim-phillips this applies to NextJS:

my node_modules include the pdfjs-dist module which itself has the build/pdf.worker.js file. this file is somehow not found by react-pdf when instantiated via import { Document } from 'react-pdf/dist/entry.webpack';

what i did was copy that file to /static and then instantiate react-pdf like so:

import { setOptions, Document, Page } from "react-pdf";

setOptions({
  workerSrc: "/static/pdf.worker.js"
});

i no longer get the error in production mode

hope this helps

RE: comment from @mgiraldo https://github.com/wojtekmaj/react-pdf/issues/67#issuecomment-384767613 on setting this up with next.js, things have changed a bit in version 4.x of react-pdf.

I still copied the worker file from node_modules/pdfjs-dist/build/pdf.worker.min.js into /static. But setOptions doesn’t seem to be a thing anymore. However, the following worked for me:

import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `/static/pdf.worker.min.js`

Thanks so much @mgiraldo! I would not have figured this out without your comment.

@nnals did you figure out how to make it work with NextJS? i’m in the same problem

yes for create-react-app you need to map all worker files to some mock in your moduleMapper in package.json like so:

{
"jest": {
    "moduleNameMapper": {
      "\\.worker.js":"<rootDir>/__mocks__/workerMock.js"
    }
  }
}

Obviously you should have a mock folder with workerMock.js in it, it could be something like this:

module.exports = Object.create(null);

As a working solution you can:

1. inwebpack.config.base.js add

    alias: { 'react-pdf': 'react-pdf/build/entry.webpack' }

1. inwebpack.config.test.js add

    alias: { 'react-pdf': 'react-pdf/build/entry.noworker' }

1. Then in your code you just import Document from 'react-pdf' and it will use the version based on your current env.

Just a small addition to @violabg comment, in order to succeed, you need to mock default static inside workerMock.js file as following

class WorkerMock {
  static default = () => {};
}
module.exports = WorkerMock;

and allow create-react-app to override moduleNameMapper option by adding it into supportedKeys array inside createJestConfig.js file.

@halvard-cognite Is it publicly available? I think some people could be interested.

Anyone have a workaround for solving the same problem when running the tests with create-react-app where the webpack config is not directly available?

  "jest": {
    "moduleNameMapper": {
      "^(.*)esm/entry.webpack": "$1umd/entry.jest"
    }
  }

in package.json made the trick for us. But here is important that we import react-pdf in the code as import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'; hope that’ll help to someone

You could also use moduleNameMapper to map entry.webpack to entry.jest 😃 That should also probably work.