'Webpack - Critical dependency: the request of a dependency is an expression
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.:
- Manually configure webpack to import the required libraries and prevent the warnings from occurring.
- Adding a
hack.js
file to my project that overrides the require calls in some way. - 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 untilhar-validator
andrequest
release subsequent updates. If there is a way to forcehar-validator
to use the beta version ofajv
, that would solve my problem. - Other
Solution 1:[1]
Solved with npm install [email protected] --save
According to the authors of ajv
, the issue will likely be resolved in the latest version of request
in a few weeks' time.
Solution 2:[2]
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'), {} )
Solution 3:[3]
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
.
Solution 4:[4]
I got this in Angular when I imported EventEmitter from 'protractor' by accident. I blame my IDE for even suggesting it!
It should be imported from core:
import { EventEmitter } from '@angular/core';
Solution 5:[5]
I had this same warnnig working with with typeorm and nextjs. I silenced it by doing using the code from here
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
module.exports = {
...
plugins: [
//ignore the drivers you don't want. This is the complete list of all drivers -- remove the suppressions for drivers you want to use.
new FilterWarningsPlugin({
exclude: [/mongodb/, /mssql/, /mysql/, /mysql2/, /oracledb/, /pg/, /pg-native/, /pg-query-stream/, /react-native-sqlite-storage/, /redis/, /sqlite3/, /sql.js/, /typeorm-aurora-data-api-driver/]
})
]
};
I added a regex like this to the exclude array above.
/Critical dependency/
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Jodiug |
Solution 2 | |
Solution 3 | L Y E S - C H I O U K H |
Solution 4 | danday74 |
Solution 5 | Mayowa Daniel |