Webpack-关键依赖项: 依赖项的请求是一个表达式

我得到三个警告信息时，导入 request在一个赤裸裸的网络包项目。在 GitHub(运行 npm install和 npm start)上有一个重现 bug 的最小示例。

Critical dependency: the request of a dependency is an expression

我怎样才能摆脱这个警告？

更多信息:

Webpack 尝试静态地解析 require调用以生成最小的 bundle。当库在请求调用中使用变量或表达式时(例如 ajv的 这些线中的 require('' + 'nodent')) ，Webpack 无法静态地解析它们并导入整个包。

我的理由是，这种动态导入在生产环境中是不可取的，最好保持代码没有警告。这意味着我需要任何能解决问题的解决方案。例如:

  1. 手动配置 webpack 以导入所需的库并防止发生警告。
  2. 在我的项目中添加一个 hack.js文件，该文件以某种方式覆盖了需求调用。
  3. 升级我的图书馆。ajv-5.0.1-beta.3有一个消除警告的修复程序。但是，如果我想使用它，我必须等到它发布，然后直到 har-validator和 request发布后续更新。如果有一种方法可以强制 har-validator使用 ajv的 beta 版本，那将解决我的问题。
  4. 其他
176145 次浏览
小开
最佳答案

用 npm install request@2.79.0 --save解决

根据 ajv的作者，这个问题可能会在最新版本的 request在几个星期的时间内得到解决。

小开

把这个换了

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

用这个

new webpack.ContextReplacementPlugin( /(.+)?angular(\\|\/)core(.+)?/, root('./src'), {} )
小开

此警告可以链接到(依赖项或 devDependency)中的包注入。

如果问题突然出现，请检查 package.json 中的最后一次修改。

如果计划重新启动 npm install，请考虑删除 package-lock. json。

小开

我从量角器导入 EventEmitter 时偶然得到了这个。我甚至责怪我的 IDE 提出这样的建议！

它应该从核心进口:

import { EventEmitter } from '@angular/core';
小开

对于 typeorm 和 nextjs，我也有同样的警告。 我通过使用这里的 < a href = “ https://typeorm.io/faq # how-to-use-webpack-for-the-back”rel = “ nofollow noReferrer”> 中的代码来让它保持沉默

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/]
})
]
};

我在上面的排除数组中添加了这样的正则表达式。

/Critical dependency/
小开

当我尝试“过程性”延迟加载时，webpack 需要在编译时理解 import 语句。

//BAD - webpack can't tell this is constant
const pages = ['privacy-policy', 'terms-of-service']
.map(name =>
lazy(() => import(`./${name}`)))




//OK - webpack can tell this is constant
const names = ['privacy-policy', 'terms-of-service']
const pages = names.map((name, index) =>
lazy(() => import(`./${names[index]}`)))
小开

在延迟加载资源时遇到它

const asset = 'config.json';
lazy(async () => await import(asset));

通过将 import 参数显式更改为 string 解决了这个问题

const asset = 'config.json';
lazy(async () => await import(`${asset}`));

提交答案