React-pdf: react-scripts: 2.0.3 breaks dependencies in lib/display/api.js and build/pdf.js v3.0.5

Hello,
thanks. This should probably be reported to mozilla/pdf.js.

Webpack 4 is not supported officially at the moment, but will be in version 4 - have you tried using it instead by installing react-pdf@next?

yes.it's incompatile with react-script-2

Check your console and look if your error is mentioned in Known issues. I just updated it while I was handling a similar issue.

Create React App is not yet compatible with worker-loader. It will be once facebook/create-react-app#3934 gets merged. For now, users of Create React App both 1.x and 2.x need to use generic solution.

@wojtekmaj May you confirm that generic solution means

import { Document, Page } from 'react-pdf';

and manual copy of the pdf.worker.js file from pdfjs-dist/build is project's output folder.

Yes, that is the generic solution @tzieleniewski. You can also use CopyWebpackPlugin to do it with every build.

@tzieleniewski @wojtekmaj
small automation: add "postinstall": "cp node_modules/pdfjs-dist/build/pdf.worker.min.js public/pdf.worker.min.js" to the scripts section in the package.json

So to confirm, there is a working solution, but we're still unable to get rid of the Critical dependency: require function is used in a way in which dependencies cannot be statically extracted warning.

• react-scripts 2.1.1
• react-pdf 4.0.0
• pdfjs-dist 2.0.943
• webpack 4.19.1

Correct. I'll be working with Mozilla to getting that fixed once for good, but it will take some time.

Correct. I'll be working with Mozilla to getting that fixed once for good, but it will take some time.

Hi!
Any updates on this?
I was trying to make "react-pdf" 4.0.0 to work with "react-scripts" v2.1.2 but still having some trouble:

• Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".

@adnux If you are upgrading, then your old implementation will not work. You will need to follow the Browserify & Others documentation.

Your imports/setup will probably look something like this...

import { pdfjs, Document, Page } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

Hi!
Any updates?

I still get this error message.

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Environment

• Browser (if applicable) [e.g. Chrome 57, Firefox 59]: N/A
• React-PDF version [e.g. 3.0.4]: 3.0.5 and also 4.0.2
• React version [e.g. 16.3.0]: 16.8.0
• React scripts: 2.1.3

This warning seems to be related to Mozilla's PDF.js using require.ensure for fallback purposes, but create-react-app's webpack configuration warning about it since it's a non-standard language feature. I'm not sure what the correct solution is, but I've opened an issue on the create-react-app repo for discussion, and this issue on the PDF.js repo might also be relevant.

Is there any temporary fix to this problem at present?

@varunpatro I am using craco to allow modification of CRA webpack config, and I remove the { parser: { requireEnsure: false } } rule. My issue was that the CI server would treat the warning as an error and I wasn't able to deploy the project. Remember it's a hacky temporary fix 😄

Here is craco.config.js code I use, maybe it will help someone.

const { isEqual } = require("lodash");

module.exports = {
  webpack: {
    configure(webpackConfig) {
      const updatedRules = webpackConfig.module.rules.filter(
        rule => !isEqual(rule, { parser: { requireEnsure: false } })
      );
      webpackConfig.module.rules = updatedRules;

      return webpackConfig;
    }
  }
};

Same CI issue as @maciejmatu - I will look into his hack but the person who fixes this properly will have my undying gratitude.

Same CI issue as @maciejmat

Compiled with warnings.

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Environment

• react-scripts: "^2.1.1"
• react-pdf: "^4.0.5"
• react: "^16.6.3"
• typescript: "^3.2.1",

@maciejmatu Hack works. But are there any other solutions or updates on this issue?

Thanks!

Hello, the same issue
[email protected]
[email protected]
[email protected]

any updates?

This is holding us back actually using your library. It means that in most cases, the CI software will not let this through, as warnings are interpreted as errors. And for a lot of people, @maciejmatu's solution won't work because we don't want to work around CRA default scripts. So this means either dropping react-pdf or finding some kind of a solution.. Which neither really is to my liking :/

@akuji1993 You can also disable warnings in your CI (which cause broken builds) by doing something like this: CI=false npm run build.

@mikemclin that's generally not a good idea because quite a few tools behave differently when running under CI

@simoneb you only need to turn the CI off when running your Create React App build command. You could keep it on for other build steps (testing, deploy, etc).

Per

https://github.com/facebook/create-react-app/issues/3657

I think the CI env var controls a couple of other things. Notably I think if you are running tests you have a catch-22 where you either see warnings as errors or you have the tests running in watch mode.

I tried to get the create-react-app folks to look again at controlling all that behavior with one flag, but no dice.

I’m using craco to work around this by hacking the standard CRA scripts without ejecting, and this seems to work for me at the moment, but I basically live in fear of having to update CRA.

Would still very much appreciate an actual fix for the warning…

Regards
Jon

On Apr 29, 2019, at 10:19 AM, Mike McLin notifications@github.com wrote:

@simoneb https://github.com/simoneb you only need to turn the CI off when running your Create React App build command. You could keep it on for other build steps (testing, deploy, etc).

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/wojtekmaj/react-pdf/issues/280#issuecomment-487598478, or mute the thread https://github.com/notifications/unsubscribe-auth/AGAPFY6ZFBI5PSCLUTL3UWTPS37XBANCNFSM4FYNCG2Q.

We caved, asked around at other teams and went with https://github.com/timarney/react-app-rewired instead, also working with pretty much the same workaround that @maciejmatu provided. Also would still like to have an actual solution, but to be fair, that seems to lie more with Mozilla then with @wojtekmaj... So it will probably take forever.

Also disabling the CI flag is absolute nono for us.

Compiled with warnings.

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Environment

• React-PDF: 4.0.5
• React: 16.8.6
• Webpack: 4.29.6
• React scripts: 3.0.0
• Other: pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

Removing the following code block from build/pdf.js suppresses the warnings, still keeping functionality in my case (I'm using external worker):

{
  var useRequireEnsure = false;

  if (typeof window === 'undefined') {
    isWorkerDisabled = true;

    if (typeof require.ensure === 'undefined') {
      require.ensure = require('node-ensure');
    }

    useRequireEnsure = true;
  } else if (typeof require !== 'undefined' && typeof require.ensure === 'function') {
    useRequireEnsure = true;
  }

  if (typeof requirejs !== 'undefined' && requirejs.toUrl) {
    fallbackWorkerSrc = requirejs.toUrl('pdfjs-dist/build/pdf.worker.js');
  }

  var dynamicLoaderSupported = typeof requirejs !== 'undefined' && requirejs.load;
  fakeWorkerFilesLoader = useRequireEnsure ? function () {
    return new Promise(function (resolve, reject) {
      require.ensure([], function () {
        try {
          var worker;
          worker = require('./pdf.worker.js');
          resolve(worker.WorkerMessageHandler);
        } catch (ex) {
          reject(ex);
        }
      }, reject, 'pdfjsWorker');
    });
  } : dynamicLoaderSupported ? function () {
    return new Promise(function (resolve, reject) {
      requirejs(['pdfjs-dist/build/pdf.worker'], function (worker) {
        try {
          resolve(worker.WorkerMessageHandler);
        } catch (ex) {
          reject(ex);
        }
      }, reject);
    });
  } : null;

  if (!fallbackWorkerSrc && (typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object' && 'currentScript' in document) {
    var pdfjsFilePath = document.currentScript && document.currentScript.src;

    if (pdfjsFilePath) {
      fallbackWorkerSrc = pdfjsFilePath.replace(/(\.(?:min\.)?js)(\?.*)?$/i, '.worker$1$2');
    }
  }
}

I am also having this issue, it is getting rather frustrating.

I tried to use /* eslint-disable */ at the top of the build/pdf.js file but that got completely ignored.

I tried removing the code block that @jguitard mentioned, but that didn't change anything either.

I even tried removing the pdfjs-dist folder altogether, but somehow the project continues to work, and gives the same warnings, referencing files that don't even exist!

I don't know what kind of black magic is going on behind the scenes. But I am using an external worker:
I have pdf.worker.min.js in my public folder. And I'm using this snippet:

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

Any suggestions would be appreciated.

Having this same issue here and my pipeline goes crazy with this error :(

@dkrefta We’re using @maciejmatu solution with React-app-rewired and so far didn’t have any issue with it. If that’s helps...

@akuji1993 yeah, I know that but I had some problems with my pipeline but now I'm using unset CI hahaha and seems ok

Hello, the same issue
[email protected]
[email protected]
[email protected]

any news?

same here...

Also getting the warning that fails my CI build.

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[email protected]
[email protected]
[email protected]

Let me summarize the solutions we have so far:

1. Run build with CI=false npm run build (loos like the easiest thing to workaround this, but I REALLY don't like it)
2. Eject and remove { parser: { requireEnsure: false } } from config.
3. Use craco and rewired to modify config without eject, and apply change described in item # 2

If you want to fix this via react-app-rewired and without a CI=false command, insert the following code into config-overrides.js:

const { isEqual } = require("lodash");

module.exports = function override(config, env) {
  // Ensures react-pdf doesn't throw a warning
  const updatedRules = config.module.rules.filter(
    rule => !isEqual(rule, { parser: { requireEnsure: false } })
  );
  config.module.rules = updatedRules;

  // Ensure jest configuration works
  config.collectCoverageFrom = [
    "src/components/**/*.{ts,tsx}",
    "!src/*.{ts, tsx}"
  ];
  return config;
};

This has worked for us without an issue now.

Using config-overrides.js with react-app-rewired to override create-react-app webpack configs without ejecting:

In react-scripts v3.1.1 requireEnsure rule is at position 0, you can change it directly.

module.exports = function override(config) {
  config.module.rules[0].parser.requireEnsure = true
  return config
}

Using config-overrides.js :

In react-scripts v3.1.1 requireEnsure rule is at position 0, you can change it directly.

module.exports = function override(config) {
  config.module.rules[0].parser.requireEnsure = true
  return config
}

@hugonasciutti is this a standard feature in CRA or is this using react-app-rewired?

@llamamoray using react-app-rewired. config-overrides.js file is to override create-react-app webpack configs without ejecting.

I edited my comment to be more complete.

I get : referenceError: window is not defined

Ran into same issue,

• [email protected]
• "react-scripts": "3.0.1"
• [email protected]:

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

moved to 4.0.0 from 4.1.0 but error stayed the same

I noticed some solutions include config-overrides.js
my current config-overrides.js is

const { override, addDecoratorsLegacy } = require("customize-cra");

module.exports = override(
  addDecoratorsLegacy(),
);

how can I combine this with the fix?

Unless I am reading this wrong, this other react project using pdf-js has resolved this issue:
https://github.com/mikecousins/react-pdf-js/releases/tag/v5.1.0
"Moving to the es6 bundled version of pdfjs-dist (@bundled-es-modules/pdfjs-dist) to get rid of the warnings when using Create React App."
Could the same thing be used here?

@taddj here is the thing, I spent a lot of hrs to understand what is going on as understanding docs it, not my thing.... after looking into the function 'config-overrides' you need to assign 'self' to the output.... here the code basically.

Most of the guys forget to say about this little magic line 'config.output.globalObject = 'this''

1. look on the repo of https://github.com/timarney/react-app-rewired to understand how to install it, create the file and where to put the file

2. Past the code and comment 👍

````
module.exports = function override(config, env) {
config.output.globalObject = 'this'
config.module.rules[0].parser.requireEnsure = true

return config;
};

```

@taddj here is the thing, I spent a lot of hrs to understand what is going on as understanding docs it, not my thing.... after looking into the function 'config-overrides' you need to assign 'self' to the output.... here the code basically.

Most of the guys forget to say about this little magic line 'config.output.globalObject = 'this''

1. look on the repo of https://github.com/timarney/react-app-rewired to understand how to install it, create the file and where to put the file
2. Past the code and comment 👍

module.exports = function override(config, env) {
  config.output.globalObject = 'this'
  config.module.rules[0].parser.requireEnsure = true

  return config;
};

```

Thank you for your reply.

My current config is

const { override, addDecoratorsLegacy } = require("customize-cra");

module.exports = override(
  addDecoratorsLegacy(),
);

How do I modify my current config override to work with what you showed? I still need the DecoratorsLegacy

Resolved the issue as described here https://github.com/arackaf/customize-cra/issues/159

Compiled with warnings.

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Environment

• React-PDF: 4.0.5
• React: 16.8.6
• Webpack: 4.29.6
• React scripts: 3.0.0
• Other: pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

Removing the following code block from build/pdf.js suppresses the warnings, still keeping functionality in my case (I'm using external worker):

{
  var useRequireEnsure = false;

  if (typeof window === 'undefined') {
    isWorkerDisabled = true;

    if (typeof require.ensure === 'undefined') {
      require.ensure = require('node-ensure');
    }

    useRequireEnsure = true;
  } else if (typeof require !== 'undefined' && typeof require.ensure === 'function') {
    useRequireEnsure = true;
  }

  if (typeof requirejs !== 'undefined' && requirejs.toUrl) {
    fallbackWorkerSrc = requirejs.toUrl('pdfjs-dist/build/pdf.worker.js');
  }

  var dynamicLoaderSupported = typeof requirejs !== 'undefined' && requirejs.load;
  fakeWorkerFilesLoader = useRequireEnsure ? function () {
    return new Promise(function (resolve, reject) {
      require.ensure([], function () {
        try {
          var worker;
          worker = require('./pdf.worker.js');
          resolve(worker.WorkerMessageHandler);
        } catch (ex) {
          reject(ex);
        }
      }, reject, 'pdfjsWorker');
    });
  } : dynamicLoaderSupported ? function () {
    return new Promise(function (resolve, reject) {
      requirejs(['pdfjs-dist/build/pdf.worker'], function (worker) {
        try {
          resolve(worker.WorkerMessageHandler);
        } catch (ex) {
          reject(ex);
        }
      }, reject);
    });
  } : null;

  if (!fallbackWorkerSrc && (typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object' && 'currentScript' in document) {
    var pdfjsFilePath = document.currentScript && document.currentScript.src;

    if (pdfjsFilePath) {
      fallbackWorkerSrc = pdfjsFilePath.replace(/(\.(?:min\.)?js)(\?.*)?$/i, '.worker$1$2');
    }
  }
}

@jguitard By (I'm using external worker): you mean this one : pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; ?

Good news everyone. This issue seem to have been fixed in https://github.com/mozilla/pdf.js/commit/d370037618211c8642dd3c576edbc2d2b3d6e09e! This means that as soon as the next stable release of pdf.js is out, we'll be able to resolve this issue.

@varunpatro I am using craco to allow modification of CRA webpack config, and I remove the { parser: { requireEnsure: false } } rule. My issue was that the CI server would treat the warning as an error and I wasn't able to deploy the project. Remember it's a hacky temporary fix 😄

Here is craco.config.js code I use, maybe it will help someone.

const { isEqual } = require("lodash");

module.exports = {
  webpack: {
    configure(webpackConfig) {
      const updatedRules = webpackConfig.module.rules.filter(
        rule => !isEqual(rule, { parser: { requireEnsure: false } })
      );
      webpackConfig.module.rules = updatedRules;

      return webpackConfig;
    }
  }
};

thanks, it works!!!

We can use CDN instead. Do we have react-pdf.min.js?

If you want to fix this via react-app-rewired and without a CI=false command, insert the following code into config-overrides.js:

const { isEqual } = require("lodash");

module.exports = function override(config, env) {
  // Ensures react-pdf doesn't throw a warning
  const updatedRules = config.module.rules.filter(
    rule => !isEqual(rule, { parser: { requireEnsure: false } })
  );
  config.module.rules = updatedRules;

  // Ensure jest configuration works
  config.collectCoverageFrom = [
    "src/components/**/*.{ts,tsx}",
    "!src/*.{ts, tsx}"
  ];
  return config;
};

This has worked for us without an issue now.

This worked for me, but removed this section:

   config.collectCoverageFrom = [
     "src/components/**/*.{ts,tsx}",
     "!src/*.{ts, tsx}"
   ];

Thanks!

@wojtekmaj https://github.com/mozilla/pdf.js/releases/tag/v2.4.456 was just released

The react-pdf 4.1.0 doesn't work with pdf.js 2.4.456. 😢

Is this still being worked on or no?
@wojtekmaj

Any updates?

@bugzpodder Unfortunately pdfjs-dist 2.4.456 is a pre-release and we won't be updating to unstable dependency. I'm looking forward to Mozilla releasing a stable version, hopefully soon.

@wojtekmaj How would you feel about pushing a new beta release with the new pdfjs-dist version so that we can do some testing on our end? i.e. v5.0.0-beta.3?

Sure thing, can be done - 5.0 will be out soon so we could advance the beta channel :)

I tried installing 5.0, still getting warnings.

I tried installing 5.0, still getting warnings.

I'm pretty sure nothing has changed quite yet; if I'm interpreting what @wojtekmaj said earlier correctly, my guess is he'll release version 5.0 – which will ship with pdf.js 2.3.200 – as stable, and then create a new beta version – like 5.1.0-beta.1 – which will ship with pdf.js 2.4.456 (per #550).

I'm using the following postinstall script to handle this issue:

#!/usr/bin/env bash
# https://github.com/wojtekmaj/react-pdf/issues/280

set -eu

NL=$(grep -n 'var useRequireEnsure = false' ./node_modules/pdfjs-dist/build/pdf.js | awk -F: '{print $1}')
START=$((NL - 1))
END=$((START + 51))

sed -i.bak -e $START's/{/\/*{/' ./node_modules/pdfjs-dist/build/pdf.js
sed -i.bak -e $END's/}/}*\//' ./node_modules/pdfjs-dist/build/pdf.js

Hey guys, any updates on this problem? I managed to use the library following the tip from @mikemclin:

import {pdfjs, Document, Page} from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

But I still get the warning:

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Any current solution without using react-app-rewired?

Hey @wojtekmaj . v2.4.456 is LTS now https://github.com/mozilla/pdf.js/releases/. Can we look into merging this PR https://github.com/wojtekmaj/react-pdf/pull/550 ?

Pinging this in hopes that this issue might be fixed soon? Any updates?
@wojtekmaj

React-PDF 5.0.0-beta.4 is out with pdf.js 2.4.456 under the hood. Feedback from those previously affected by this bug is welcome :)

I can confirm, with 5.0.0-beta.4 the error message is gone for me

error is gone with 5-beta.4

No errors in 5.0.0-beta.4. Waiting for the stable version.

I'm facing same problem:
my dependencies are:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.10",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.0",
    "bootswatch": "^4.5.0",
    "jsonwebtoken": "^8.5.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-password-strength": "^2.4.0",
    "react-pdf": "^5.0.0-beta.4",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-toastify": "^6.0.5",
    "redux": "^4.0.5"
  },

I would thanks any help
Best regards

@PedroRuiz just to confirm, you deleted the npm_modules folder? Before install again the packages?

@wojtekmaj Hm. I get _massive_ performance degradation and some odd behavior when upgrading from 5.0.0-beta.2 to 5.0.0-beta.4. We use the "standard" instructions to serve the PDF.js worker locally.

Please mind that this thread is for this specific error only. Please use #495 for general 5.0 beta discussion.

@GabrielF9 I did it.

@PedroRuiz Oh, I maked this and got all works fine. Can you share the part of code where you use the react-pdf?

@GabrielF9 I don't know why, it goes fine now. I apologize for inconvenience

@PedroRuiz happens hahahaha happy it worked

React-PDF 5.0.0-beta.4 is out with pdf.js 2.4.456 under the hood. Feedback from those previously affected by this bug is welcome :)

@wojtekmaj
This fix works like a charm! Any insight on when it'll be in a stable version?

If not for the performance degradation it'd be already live. I don't think there will be any developer facing changes at this point though.

Yes!!!, after upgrading to React-PDF 5.0.0-beta.4, the warning is gone!

It there any chance to resolve this error at 4.x version? I cannot use 5.x because of compatibility with IE11 :-/

There's no way. The first version pdfjs shipped with this issue was actually the one that already dropped IE11 support, which we noticed later.