Cannot find module 'worker-loader!./build/pdf.worker.js' about react-pdf HOT 24 CLOSED

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)

from react-pdf.

@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

from react-pdf.

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

from react-pdf.

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

from react-pdf.

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.

from react-pdf.

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.

from react-pdf.

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?

from react-pdf.

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

from react-pdf.

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.

from react-pdf.

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

from react-pdf.

  "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

from react-pdf.

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.

from react-pdf.

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!

from react-pdf.

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.

from react-pdf.

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

from react-pdf.

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

from react-pdf.

from react-pdf.

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

not very elegant but works :)

from react-pdf.

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

from react-pdf.

@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.

from react-pdf.

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...

from react-pdf.

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

from react-pdf.

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;

from react-pdf.

@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`;

from react-pdf.