Dependencies that use require.ensure for backward compatibility cause warnings

[localjo]

Importing dependencies into an app created with create-react-app that use require.ensure as a fallback option causes the following warning in the console;

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

This seems to be because the webpack settings in create-react-app do not allow dependencies to use require.ensure, but it seems that some libraries need to include this as a conditional fallback.

One possible solution might be to remove { parser: { requireEnsure: false } } from the webpack configuration. I don't see much context or discussion about why that rule is important other than that it's not a standard language feature.

I can see the argument from both sides, both why create-react-app would want to warn about this, and why another package might want to include it as a fallback. I don't know the correct solution, but this causes noisy warnings in the console when starting an app that make it more difficult to focus on actionable warnings.

Maybe the correct solution is to allow the suppression of unwanted warnings in create-react-app, but that seems to be a settled issue.

I'm open to any other workarounds or solutions.

[wpp]

Thanks for writing this up!

I'm in the same situation and had to set the CI env variable, for a work-around.
A mechanism for supressing these types of warnings would be a splendid solution.

[gaearon]

In longer term we don’t promise continued support for this feature — so it seems to make sense for it to warn. That’s better than if it breaks with no warning in a future release.

Code published to npm ideally shouldn’t be using webpack specific features. Can you explain more about why pdfjs is an exception, and why they use it?

[localjo]

From what I understand, the code using require.ensure in PDF.js is a fallback for non-webpack environments. In a webpack environment that code is irrelevant, but create-react-app still warns about it because it doesn't know from a static analysis that it's irrelevant.

@gaearon Do you have a specific recommendation for PDF.js contributors @timvandermeij or @Snuffleupagus on what would be the preferred way to support non-webpack users with this fallback? I'm sure this would be of general interest as well, since I've seen quite a few packages where people are reporting this warning.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[akuji1993]

I'd really like to see a solution to this issue as it's currently holding us up from using react-pdf without having any alternative.

[dkrefta]

@akuji1993 same thought 👍

[kyeotic]

Is there a way to disable warnings for node_modules? Seems kind of harsh to fail a build for warnings in code we don't even control.

[ARam2142]

im new here. I was looking to help out with this project. But it seems like its past due at this point

[janetlee]

CRA includes react-pdf and I don't even use this module, but TypeScript does not like it. See the comment link below with a TS v4.1 screenshot. When it was a warning with TS 3.6, I could ignore it, but now I can't even run locally without this 'not a function' error. I've tried changing the babel/runtime versions, adding react-app-rewired, some other plugin tweaks that are on the internet. Is there anything else that I can try? Is there something wrong with my config? Thanks in advance!

wojtekmaj/react-pdf#280 (comment)

[localjo]

@janetlee CRA doesn't include react-pdf, and the error you're describing is different from what this issue is about. Something may be wrong with your TypeScript config. I would recommend asking your question in the TypeScript Discord server. Someone there may be able to help you debug your TypeScript config. https://discord.com/invite/typescript

[localjo]

An update on the status of this issue for those who are interested: It looks like the PDF.js maintainers are open to suggestions for improved bundling of PDF.js and would accept a PR that doesn't add a maintainability burden. mozilla/pdf.js#12900

So it seems like there are currently two possible solutions:

1. Use something like react-app-rewired to modify your webpack config and suppress the warning.

2. Open a PR to https://github.com/mozilla/pdf.js that creates a PDF.js bundle that removes the require.ensure calls completely, without creating a maintainability issue.

There is an open issue for the second option on the PDF.js repo: mozilla/pdf.js#10317

[janetlee]

Thanks @localjo for the suggestions. Entirely possible the TS config is screwed up. This is all new to me.

UPDATE: FYI - These were all the packages I installed or upgraded to fix my issue. IDK which one actually did the trick but it's all fixed for me now (TS v4, AntD, Webpack 4). Good luck!

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