100

I am getting three warning messages when importing request in a barebone webpack project. A minimal example to reproduce the bug is available on GitHub (run npm install and npm start).

Critical dependency: the request of a dependency is an expression

How can I get rid of this warning?

More information:

Webpack tries to resolve require calls statically to make a minimal bundle. When a library uses variables or expressions in a require call (such as require('' + 'nodent') in these lines of ajv), Webpack cannot resolve them statically and imports the entire package.

My rationale is that this dynamic import is not desirable in production, and code is best kept warning-free. That means I want any solution that resolves the problem. E.g.:

  1. Manually configure webpack to import the required libraries and prevent the warnings from occurring.
  2. Adding a hack.js file to my project that overrides the require calls in some way.
  3. Upgrading my libraries. ajv-5.0.1-beta.3 has a fix that silences the warnings. However, if I want to use it, I have to wait until it is released, and then until har-validator and request release subsequent updates. If there is a way to force har-validator to use the beta version of ajv, that would solve my problem.
  4. Other
Jodiug
  • 3,233
  • 4
  • 22
  • 38
  • 1. https://github.com/epoberezkin/ajv/issues/117#issuecomment-198328830 2. I don't think it'll work 3. you'll have to wait a bit. – esp Mar 20 '17 at 16:58
  • @esp: that github comment seems to be what I'm looking for, but it doesn't silence the warnings. If I change it to `new webpack.IgnorePlugin(/async/, /ajv/)`, two out of three warnings are gone but webpack `Cannot find module "../async"`. Any idea about the proper magic value to make it work? – Jodiug Mar 21 '17 at 09:28
  • 1
    The link to the github code example is broken. Pls put code directly into the question. – CodeChimpy May 28 '19 at 10:19

3 Answers3

27

Solved with npm install request@2.79.0 --save

According to the authors of ajv, the issue will likely be resolved in the latest version of request in a few weeks' time.

Jodiug
  • 3,233
  • 4
  • 22
  • 38
  • @maembe try `npm remove request` and reinstall, then in `package.json` remove the `^` before the version number. If you leave the `^`, the package may be updated after an `npm update` and the warning reappears. – Jodiug Aug 25 '17 at 18:35
  • Didn't work for me. But the suggestion by @DhirendraNk in a different answer below, which is to replacing the webpack.ContextReplacementPlugin worked for me. – Will Mar 25 '18 at 19:13
11

Replace this

new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/,
        helpers.root('./src'), // location of your src
        {} // a map of your routes
    ),

with this-

new webpack.ContextReplacementPlugin( /(.+)?angular(\\|\/)core(.+)?/, root('./src'), {} )
DhirendraNk
  • 127
  • 1
  • 3
  • 10
    This does work. It would be nice for a more in-depth explanation as to why the regular expression change fixes this issue. – atconway Mar 06 '18 at 04:50
  • This works for me, it's been annoying to see the warning, thanks. – Will Mar 25 '18 at 19:09
  • 2
    does anyone knows where to find this code? I am unable to find the code to replace. – Prem popatia Mar 25 '19 at 07:11
  • 2
    This works because you are telling the `System.Import` function where to find source code in the `node_modules` folder. The path changes depending on the Angular version you are using. It should be handled better by the Angular team, hopefully it has already been. – Robert Brisita Apr 18 '19 at 04:37
1

This warning can be linked to packages injections in (dependancies or devDependencies).

If the problem suddenly appears, check the last modification in your package.json.

Consider removing package-lock.json if you plan to relaunch an npm install.

L Y E S - C H I O U K H
  • 3,827
  • 7
  • 32
  • 52