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

[nnals]

hello,

is there anything i have to do besides import { Document, Page } from 'react-pdf/build/entry.webpack' to use service workers? i'm running react-pdf 2.1.1 and nextjs (in case that's of any relevance).

thank you!
nicolai

index.js?d08fcf9:101 Cannot find module 'worker-loader!./build/pdf.worker.js'
Error: Cannot find module 'worker-loader!./build/pdf.worker.js'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> ([...]/node_modules/pdfjs-dist/webpack.js:18:19)
    at Module._compile (module.js:569:30)
    at Module._compile ([...]/node_modules/source-map-support/source-map-support.js:483:25)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)

[wojtekmaj]

Hey @nnals! I don't think you need to do anything else. Webpack should figure that one out if you have everything installed properly. Please make sure you have the loader worker in place and react-pdf is installed correctly, i.e. the file node_modules/pdfjs-dist/build/pdf.worker.js exists.

[nnals]

node_modules/pdfjs-dist/build/pdf.worker.js exists. the package worker-loader also got installed. since i'm using nextjs there's already an internal webpack config but i could extend it.

could you explain Please make sure you have the loader in place a little bit more? i'm quite new to webpack so i'm not sure what you mean by that.

do you think this might help?
https://github.com/zeit/next.js/tree/master/examples/with-sw-precache

thank you!

[wojtekmaj]

Oh man :) I do remember struggling with webpack at first a lot. I definitely feel you.

First of all, I've worked super hard to make react-pdf very easy to install. It should not be necessary to change anything in your webpack configuration files.

Perhaps you're using some non-compatible version of webpack? worker-loader for some reason accepts 2.x versions, but not yet 3.x versions.

If that is not the case, the only thing I can recommend is to start from sample directory I've included and just try to get it as close as possible to your project, and see when it would fail.

Sorry for the confusion in the previous post.

[Andrewwelton]

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 webpack-contrib/worker-loader#10 (comment)

[atermenji]

As a working solution you can:

1. inwebpack.config.base.js add

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

2. inwebpack.config.test.js add

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

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

[halvard-cognite]

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?

[SrikanthChebrolu]

@halvard-cognite did you get the solution for this problem ?

[halvard-cognite]

@SrikanthChebrolu No, we ended up maintaining a fork of react-scripts to be able to change stuff like this.

[wojtekmaj]

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

[violabg]

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);

[mgiraldo]

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

[nnals]

no, sorry. i switched to create-react-app shortly afterwards which also solved this problem.

…

________________________________ From: Mauricio Giraldo <notifications@github.com> Sent: Wednesday, April 25, 2018 5:23:54 PM To: wojtekmaj/react-pdf Cc: Nicolai Benker; Mention Subject: Re: [wojtekmaj/react-pdf] Cannot find module 'worker-loader!./build/pdf.worker.js' (#67) @nnals<https://github.com/nnals> did you figure out how to make it work with NextJS? i'm in the same problem — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#67 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AHEB7UmKmARBBTUxv2i_HRYx7SLPDp8xks5tsJUKgaJpZM4PjSl->.

[mgiraldo]

i see. i ended up copying the pdf.worker.js file to /static and referencing it in setOptions

not very elegant but works :)

[tim-phillips]

@mgiraldo how did you set this up? i'm confused by your description.

[mgiraldo]

@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

[tim-phillips]

@mgiraldo thank you! that works for me

i used the minified worker at build/pdf.worker.min.js

EDIT: I ended up not using this module due to the size and build times of PDF.js. I'm now simply linking to a url of the pdf and letting the browser do the work.

[valgussev]

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.

[nate-summercook]

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.

Cool, thx, but how do you override the createJestConfig.js? I don't have that in my project...

[valgussev]

CRA v.1* has this file under react-scripts/scripts/utils. Can say nothing about cra v2*

[nate-summercook]

Found a solution for myself here. Instead of going via createJestConfig.js, you can also just do this in the config-overrides.js

module.exports = {
  webpack: rewireWebpackConfig,
  jest: (config) => {
    config.moduleNameMapper = {
      "\\.worker.js": "<rootDir>/__mocks__/workerMock.js"
    };
    return config;
  }
};

and then in the __mocks__/workerMock.js

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

[wojtekmaj]

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

[bryandowning]

RE: comment from @mgiraldo #67 (comment) 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.

[scottie-schneider]

@bryandowning @mgiraldo Following the solutions you've given for Next JS, I'm now getting the error for mismatching API/worker versions:

Error: The API version "2.1.266" does not match the Worker version "2.0.550"

Did you encounter this and how did you solve if so?

EDIT:
Thanks for this. I needed to dig a bit further to solve this particular issue.

React-PDF's documentation

Alternatively, you could use pdf.worker.js from an external CDN:

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js"

I found the correct CDN Version here:
https://cdnjs.com/libraries/pdf.js/2.1.266

The lines of code that solved the issue for me:

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.js`;

[Andrei-Salanovich-epam]

  "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