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

lilcorey · 2018-10-02T03:31:11Z

Updating create-react-app to v2.0.3 has resulted in this node module to not load PDFs.

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

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

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

./node_modules/pdfjs-dist/lib/display/api.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/lib/display/api.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/pdfjs-dist/build/pdf.js

Describe solutions you've tried

Deleting the module and reinstalling via npm install has resulted in the same issue.

Additional information

If applicable, add screenshots (preferably with browser console open) and files you have an issue with to help explain your problem.

Environment

Browser (if applicable) [e.g. Chrome 57, Firefox 59]: N/A
React-PDF version [e.g. 3.0.4]: 3.0.5
React version [e.g. 16.3.0]: 16.4.1
Webpack version (if applicable) [e.g. 4.16.2]: 4.19.1
React scripts: 2.0.3

The text was updated successfully, but these errors were encountered:

wojtekmaj · 2018-10-04T11:03:11Z

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?

chiragv508 · 2018-10-05T10:37:53Z

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

wojtekmaj · 2018-10-05T13:15:23Z

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

wojtekmaj · 2018-10-05T20:08:15Z

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.

tzieleniewski · 2018-11-19T13:49:57Z

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

wojtekmaj · 2018-11-19T14:05:53Z

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

Krivega · 2018-11-29T16:31:15Z

@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

mikemclin · 2018-12-12T12:13:56Z

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

wojtekmaj · 2018-12-13T08:45:02Z

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

adnux · 2018-12-28T16:36:39Z

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

mikemclin · 2018-12-28T18:44:13Z

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

rovaniemi · 2019-02-06T17:13:34Z

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

localjo · 2019-02-13T20:52:01Z

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.

varunpatro · 2019-02-28T08:47:00Z

Is there any temporary fix to this problem at present?

maciejmatu · 2019-02-28T13:40:40Z

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

softwareplumber · 2019-03-11T03:06:39Z

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

OnimeNoKyo · 2019-03-17T16:01:31Z

Same CI issue as @MaciejMat

mbaric1 · 2019-04-01T11:29:29Z

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!

rsmything · 2019-04-08T14:45:23Z

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

any updates?

akuji1993 · 2019-04-29T12:56:37Z

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 :/

mikemclin · 2019-04-29T14:14:44Z

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

simoneb · 2019-04-29T14:15:39Z

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

mikemclin · 2019-04-29T14:19:23Z

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

gabsf-dev · 2020-06-01T20:36:29Z

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?

gochi-dot · 2020-06-01T21:23:46Z

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

FurkanToprak · 2020-06-09T14:01:52Z

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

wojtekmaj · 2020-06-09T21:26:27Z

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

TimotheBarbe · 2020-06-10T20:31:22Z

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

BoazKG93 · 2020-06-11T07:10:22Z

error is gone with 5-beta.4

gabsf-dev · 2020-06-11T14:44:50Z

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

PedroRuiz · 2020-06-15T18:53:33Z

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

gabsf-dev · 2020-06-18T11:14:08Z

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

SamuelMS · 2020-06-18T11:47:47Z

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

wojtekmaj · 2020-06-18T11:57:01Z

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

PedroRuiz · 2020-06-18T12:55:19Z

@GabrielF9 I did it.

gabsf-dev · 2020-06-19T20:06:01Z

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

PedroRuiz · 2020-06-26T11:00:56Z

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

gabsf-dev · 2020-06-26T13:14:31Z

@PedroRuiz happens hahahaha happy it worked

FurkanToprak · 2020-07-04T02:39:12Z

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?

wojtekmaj · 2020-07-04T05:34:01Z

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.

sivadass · 2020-07-21T11:21:30Z

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

kopecmi8 · 2020-08-26T14:04:07Z

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

wojtekmaj · 2020-08-27T14:16:50Z

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.

dilemmawalker · 2020-12-11T17:16:00Z

I havent got any solution myself too & still stuck on the same prob.

wojtekmaj · 2020-12-11T17:24:24Z

As I said there's absolutely no way 4.x will have this issue fixed. Either upgrade to 5.x or live with it. Sorry.

janetlee · 2021-02-25T20:06:06Z

Bumped to 5.2.0 and still seeing this error message.

"react-pdf": "5.2.0",
"react-scripts": "^3.4.3",
"react": "16.13.0",
"typescript": "4.1.5",
"webpack": "^4.44.2"

The irony here is that I don't even need this package. I don't display PDFs. The "standard" instructions don't work for me because I don't call on this package ever. It became a complete block when I moved to TS v4 coupled with another dependency upgrade I was testing out.

UPDATE: As advised, I fixed my TS config. If anyone is still getting these messages on Webpack 4, go back and walk through all your types and configuration. I added back a huge list of packages and it magically fixed itself.

"@babel/plugin-transform-runtime": "^7.13.8", <- installed it new
"@babel/runtime": "^7.13.8", <- installed it new
"@babel/runtime-corejs3": "^7.13.8", <- installed it new
"react-app-rewired": "^2.1.8", <- installed it new
"@babel/polyfill": "^7.12.1", <- installed it new
"@babel/preset-typescript": "^7.13.0", <- installed it new
"@types/jest": "^26.0.20", <- upgraded it
"@types/node": "^14.14.31", <- upgraded it
"@types/react": "^17.0.2", <- upgraded it
"@types/react-dom": "^17.0.1", <- upgraded it 
"babel-loader": "^8.2.2", <- upgraded it
"ts-import-plugin": "^1.6.7", <- installed it new
"typescript": "4.2.2",  <- upgraded it

The React app build failed with the previous version of `pdfjs-dist` due to a dynamic require. See wojtekmaj/react-pdf#280 (comment). This commit updates it to the first version that fixed the problem (I've had issues with newer versions of `pdfjs-dist`, though we should try again at some point).

wojtekmaj closed this as completed Oct 4, 2018

wojtekmaj reopened this Oct 4, 2018

wojtekmaj self-assigned this Oct 4, 2018

wojtekmaj added the question Further information is requested label Oct 4, 2018

wojtekmaj mentioned this issue Oct 28, 2018

Compatibility with Webpack 4 / Create React App 2 #179

Closed

wojtekmaj mentioned this issue Dec 2, 2018

Anybody get latest release to work with webpack 4? #311

Closed

wojtekmaj added the help wanted Extra attention is needed label Apr 11, 2019

wojtekmaj removed the help wanted Extra attention is needed label Jun 11, 2020

wojtekmaj closed this as completed Jun 11, 2020

This was referenced Feb 25, 2021

Dependencies that use require.ensure for backward compatibility cause warnings facebook/create-react-app#6418

Open

publish es6 modules to npm mozilla/pdf.js#10317

Closed

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

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

Comments

lilcorey commented Oct 2, 2018

wojtekmaj commented Oct 4, 2018 • edited Loading

chiragv508 commented Oct 5, 2018

wojtekmaj commented Oct 5, 2018

wojtekmaj commented Oct 5, 2018

tzieleniewski commented Nov 19, 2018

wojtekmaj commented Nov 19, 2018 • edited Loading

Krivega commented Nov 29, 2018

mikemclin commented Dec 12, 2018 • edited Loading

wojtekmaj commented Dec 13, 2018

adnux commented Dec 28, 2018

mikemclin commented Dec 28, 2018

rovaniemi commented Feb 6, 2019 • edited Loading

localjo commented Feb 13, 2019

varunpatro commented Feb 28, 2019

maciejmatu commented Feb 28, 2019

softwareplumber commented Mar 11, 2019

OnimeNoKyo commented Mar 17, 2019

mbaric1 commented Apr 1, 2019 • edited Loading

rsmything commented Apr 8, 2019

akuji1993 commented Apr 29, 2019 • edited Loading

mikemclin commented Apr 29, 2019

simoneb commented Apr 29, 2019 • edited Loading

mikemclin commented Apr 29, 2019

gabsf-dev commented Jun 1, 2020 • edited Loading

gochi-dot commented Jun 1, 2020

FurkanToprak commented Jun 9, 2020

wojtekmaj commented Jun 9, 2020 • edited Loading

TimotheBarbe commented Jun 10, 2020

BoazKG93 commented Jun 11, 2020

gabsf-dev commented Jun 11, 2020

PedroRuiz commented Jun 15, 2020

gabsf-dev commented Jun 18, 2020

SamuelMS commented Jun 18, 2020

wojtekmaj commented Jun 18, 2020 • edited Loading

PedroRuiz commented Jun 18, 2020

gabsf-dev commented Jun 19, 2020

PedroRuiz commented Jun 26, 2020 • edited Loading

gabsf-dev commented Jun 26, 2020

FurkanToprak commented Jul 4, 2020 • edited Loading

wojtekmaj commented Jul 4, 2020

sivadass commented Jul 21, 2020

kopecmi8 commented Aug 26, 2020

wojtekmaj commented Aug 27, 2020

dilemmawalker commented Dec 11, 2020

wojtekmaj commented Dec 11, 2020

janetlee commented Feb 25, 2021 • edited Loading

wojtekmaj commented Oct 4, 2018 •

edited

Loading

wojtekmaj commented Nov 19, 2018 •

edited

Loading

mikemclin commented Dec 12, 2018 •

edited

Loading

rovaniemi commented Feb 6, 2019 •

edited

Loading

mbaric1 commented Apr 1, 2019 •

edited

Loading

akuji1993 commented Apr 29, 2019 •

edited

Loading

simoneb commented Apr 29, 2019 •

edited

Loading

gabsf-dev commented Jun 1, 2020 •

edited

Loading

wojtekmaj commented Jun 9, 2020 •

edited

Loading

wojtekmaj commented Jun 18, 2020 •

edited

Loading

PedroRuiz commented Jun 26, 2020 •

edited

Loading

FurkanToprak commented Jul 4, 2020 •

edited

Loading

janetlee commented Feb 25, 2021 •

edited

Loading