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

Question

在一个基本的webpack项目中引入request时，会出现三个警告信息。您可以在GitHub上找到一个最小化的样例来复现这个问题（运行npm install和npm start）。 Critical dependency: the request of a dependency is an expression 如何消除这个警告？

更多信息：

Webpack试图静态解析require调用以生成一个最小的包。当一个库在require调用中使用变量或表达式（例如ajv库的这些代码行中的require('' + 'nodent')），Webpack无法静态解析它们并导入整个包。

我的理解是，在生产环境中不希望出现这种动态导入，并且最好保持代码无警告。这意味着我想要任何解决问题的方法。例如：

1.手动配置Webpack以导入所需的库并防止发生警告。 2.向我的项目添加一个hack.js文件，以某种方式覆盖require调用。 3.升级我的库。 ajv-5.0.1-beta.3有一个修复程序可以消除警告。但是，如果我想使用它，我必须等到它发布，然后等到har-validator和request发布后续更新。如果有一种方法可以强制har-validator使用ajv的beta版本，那么这个问题就解决了。 4.其他

- Jodiug

---

1. https://github.com/epoberezkin/ajv/issues/117#issuecomment-198328830
2. 我认为这不会起作用。
3. 你需要等一会儿。

- esp

@esp：那个 GitHub 评论似乎是我正在寻找的内容，但它无法消除警告。如果我将其更改为 new webpack.IgnorePlugin(/async/, /ajv/) ，三个警告中有两个已经消失了，但 webpack 报错 Cannot find module "../async"。是否有关于适当的魔术值可以使其正常工作的想法？ - Jodiug

Github代码示例的链接已失效，请直接将代码放入问题中。 - CodeChimpy

如果您在自己的代码中编写动态的基于表达式的导入并在此之后看到此警告，您可以使用以下方式绕过警告：import(/* webpackIgnore: true */ "http://example.com/cdn/file.js")。这不是解决方案，而是一种变通方法。 - Ninjakannon

@Ninjakannon 那应该被制作成答案。 - ekerner

Answer 1

使用npm install request@2.79.0 --save解决问题。

根据ajv的作者，这个问题很可能会在最新版本的request中在几周内得到解决。

- Jodiug

---

@maembe 尝试使用 npm remove request 命令卸载并重新安装，然后在 package.json 文件中删除版本号前面的 ^ 符号。如果保留了 ^ 符号，在执行 npm update 后可能会更新该包，并且警告会再次出现。 - Jodiug

对我没用。但是下面另一个答案中@DhirendraNk的建议，即替换webpack.ContextReplacementPlugin对我有用。 - Will

追随者们请注意：请求包现已被弃用。 - Jeremy

@Jeremy谢谢，但你不知道今天怎么解决吗？我得到的是eslint的依赖项ajv -> @eslint/eslintrc (2.1.0)。虽然我的锁定文件上没有"request"。可能最好的答案已经过时了。 - Roman86

Answer 2

在懒加载资源时遇到了它

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

通过显式将导入参数更改为字符串来解决了它

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

- Saba

Answer 3

替换这段内容

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'), {} )

- DhirendraNk

---

可以的，这确实有效。关于为什么正则表达式的更改可以解决这个问题，如果能提供更详细的解释会更好。 - atconway

这对我有用，看到警告一直很烦人，谢谢。 - Will

有人知道在哪里找到这段代码吗？我找不到可替换的代码。 - Prem popatia

这样做是因为您告诉System.Import函数在node_modules文件夹中查找源代码的位置。路径根据您使用的Angular版本而变化。希望Angular团队能更好地处理它，希望他们已经解决了这个问题。 - Robert Brisita

对我来说不起作用，这与Angular无关。 - jonschlinkert

Answer 4

这个警告可能与依赖项或开发依赖项中的软件包注入有关。

如果问题突然出现，请检查您的package.json文件中的最后修改时间。

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

- L Y E S - C H I O U K H

Answer 5

当我尝试进行“过程式”的惰性加载时，我得到了这个错误。Webpack需要在编译时理解导入语句。

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

- chantey

Answer 6

我在使用typeorm和nextjs时遇到了相同的警告。 我通过使用这里的代码将其消除。

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/

- Mayowa Daniel

Answer 7

当我不小心从“protractor”导入EventEmitter时，出现了这个Angular错误。我责怪我的IDE甚至建议我这样做！应该从核心导入它：

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

- danday74