由于“Module not found: Error: Can't resolve”错误，Webpack 突然无法编译

Posted 2023-02-21

技术标签:

【中文标题】由于“Module not found: Error: Can\'t resolve”错误，Webpack 突然无法编译【英文标题】：Webpack suddenly fails to compile due to "Module not found: Error: Can't resolve" errors由于“Module not found: Error: Can't resolve”错误，Webpack 突然无法编译 【发布时间】：2020-04-07 02:05:00 【问题描述】：

截至昨天下午，我们的 javascript 单元测试套件开始失败。没有任何测试运行，并且 webpack 在出现 Module not found 错误字符串后报告构建失败。这是我们的构建堆栈：

节点 6.11.5（是的，我知道，很旧）业力 1.7.1 网页包 2.2.1 反应 15.6.2

我们使用 Karma 运行我们的单元测试。大多数测试套件都涉及 React，因此我们使用 Webpack 构建一切。为此，我们导入我们的 webpack 配置，然后将各种值插入到 Karma webpack 配置中。

直接使用 Webpack 构建脚本可以正常工作，但是当我们尝试运行 karma start 时，我们会收到很多这样的错误：

ERROR in ./~/object.entries/implementation.js
Module not found: Error: Can't resolve 'es-abstract/2019/RequireObjectCoercible' in '/jenkins/workspace/RFD/DCS/assets-build/build-js/node_modules/object.entries'
 @ ./~/object.entries/implementation.js 3:29-79
 @ ./~/object.entries/index.js
 @ ./~/enzyme/build/Utils.js
 @ ./~/enzyme/build/ReactWrapper.js
 @ ./~/enzyme/build/index.js
 @ ../sources/admin/js/pages/sponsored/organic_flyers/tests/DealerAddButton.spec.jsx

ERROR in ./~/object.fromentries/implementation.js
Module not found: Error: Can't resolve 'es-abstract/2019/AddEntriesFromIterable' in '/jenkins/workspace/RFD/DCS/assets-build/build-js/node_modules/object.fromentries'
 @ ./~/object.fromentries/implementation.js 3:29-79
 @ ./~/object.fromentries/index.js
 @ ./~/enzyme-adapter-utils/build/Utils.js
 @ ./~/enzyme-adapter-utils/build/index.js
 @ ./~/enzyme-adapter-react-15/build/ReactFifteenAdapter.js
 @ ./~/enzyme-adapter-react-15/build/index.js
 @ ../sources/admin/js/pages/sponsored/organic_flyers/tests/DealerAddButton.spec.jsx

ERROR in ./~/object.fromentries/implementation.js
Module not found: Error: Can't resolve 'es-abstract/2019/CreateDataPropertyOrThrow' in '/jenkins/workspace/RFD/DCS/assets-build/build-js/node_modules/object.fromentries'
 @ ./~/object.fromentries/implementation.js 4:32-85
 @ ./~/object.fromentries/index.js
 @ ./~/enzyme-adapter-utils/build/Utils.js
 @ ./~/enzyme-adapter-utils/build/index.js
 @ ./~/enzyme-adapter-react-15/build/ReactFifteenAdapter.js
 @ ./~/enzyme-adapter-react-15/build/index.js
 @ ../sources/admin/js/pages/sponsored/organic_flyers/tests/DealerAddButton.spec.jsx

ERROR in ./~/object.fromentries/implementation.js
Module not found: Error: Can't resolve 'es-abstract/2019/Get' in '/jenkins/workspace/RFD/DCS/assets-build/build-js/node_modules/object.fromentries'
 @ ./~/object.fromentries/implementation.js 5:10-41
 @ ./~/object.fromentries/index.js
 @ ./~/enzyme-adapter-utils/build/Utils.js
 @ ./~/enzyme-adapter-utils/build/index.js
 @ ./~/enzyme-adapter-react-15/build/ReactFifteenAdapter.js
 @ ./~/enzyme-adapter-react-15/build/index.js
 @ ../sources/admin/js/pages/sponsored/organic_flyers/tests/DealerAddButton.spec.jsx

所有这些问题似乎都与es-abstract 相关，我们注意到昨天有一个新版本（1.17.0-next.1）。这正是一切开始失败的时候。也就是说，该软件包似乎已正确下载并安装：

ubuntu@ip-172-17-108-178:/workspace/assets-build/build-js$ npm list es-abstract
admin@0.0.1 /workspace/assets-build/build-js
├─┬ enzyme@3.10.0
│ ├─┬ array.prototype.flat@1.2.3
│ │ └── es-abstract@1.17.0-next.1
│ ├─┬ object.entries@1.1.1
│ │ └── es-abstract@1.17.0-next.1
│ └─┬ string.prototype.trim@1.2.0
│   └── es-abstract@1.16.3  deduped
├─┬ enzyme-adapter-react-15@1.4.1
│ ├─┬ enzyme-adapter-utils@1.12.1
│ │ ├─┬ airbnb-prop-types@2.15.0
│ │ │ └─┬ array.prototype.find@2.1.0
│ │ │   └── es-abstract@1.16.3  deduped
│ │ └─┬ object.fromentries@2.0.2
│ │   └── es-abstract@1.17.0-next.1
│ └─┬ object.values@1.1.1
│   └── es-abstract@1.17.0-next.1
├─┬ eslint-plugin-jsx-a11y@6.2.3
│ └─┬ array-includes@3.1.0
│   └── es-abstract@1.17.0-next.1
└─┬ object.values@1.0.4
  └── es-abstract@1.16.3

当我手动检查 node_modules 目录时，我可以看到所有我希望看到的文件，基于对 es-abstract Github 的粗略检查。我不明白为什么 Webpack 显然看不到这些文件，尽管它们安装在正确的位置。我也无法弄清楚为什么这会在昨天突然中断，除非 es-abstract 包有问题。但如果是这样的话，没有人向任何受影响的项目（包括 Enzyme 和一些 ES 垫片）或 es-abstract 项目本身报告任何问题。此外，查看一些受影响项目的 CI 构建，它们似乎都报告通过了测试。

我们不知道该怎么办。我尝试从头开始清除 node_modules 和 npm installing，将 Node 升级到 v8 LTS，降级 Enzyme 和 React 适配器以尝试引入旧版本的 es-abstract（这不起作用，他们的package.json 文件仍然要求^1.17.0-next.1，这对我来说毫无意义，因为其中一些版本已经存在一年了）。没有任何效果。

【问题讨论】：

我们也有同样的问题。我为此github.com/ljharb/es-abstract/issues/83 创建了一个问题。您也许可以从那里获得通知和解决方案。我们也遇到了上述问题。还没有找到任何解决方案。我们还使用了 React 15.x 版本和 Webpack 2.x，因为它是一个“遗留”项目。我几乎经历了与 OP 相同的调试过程，并且能够在 es-abstract 的 node_modules 文件夹中找到“丢失”的文件。我一无所知.. 我们也在使用固定版本来解决此类问题 - 其中一个是名为 react-dates@10.1.1 的库 airbnb-prop-types 2.15 最新版本几天前刚刚发布，其中包括 es-abstract@1.17.0 -next.1 发布由于添加了动态版本的库似乎不再正确维护（443 个未解决的问题和 70 个未解决的 PR），我将分叉它并自行托管 “动态应用程序需要什么”？酶得到充分维护，airbnb-prop-types 也是如此。这是 webpack 的错误配置，仅此而已。请为这些事情提交 github 问题。 【参考方案1】：

这是 Webpack 或 Jest 配置的问题。

绝对路径和相对路径都可以使用，但请注意它们的行为会有所不同。

通过查看当前目录及其祖先（即 ./node_modules、../node_modules 等），将扫描相对路径，类似于 Node 扫描 node_modules 的方式。

使用绝对路径，它只会在给定的目录中搜索。

webpack.config.js

module.exports = 
  //...
  resolve: 
    modules: ['node_modules']
  
;

使用 node_modules 的相对路径

【讨论】：

【参考方案2】：

我遇到了这个问题，并通过在 Jest 中修复我的模块分辨率设置来解决。

就目前的情况而言，我的包锁包括：

"array.prototype.find": 
  "version": "2.1.0",
  "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.0.tgz",
  "integrity": "sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==",
  "requires": 
    "define-properties": "^1.1.3",
    "es-abstract": "^1.13.0"
  
,

和

"array-includes": 
  "version": "3.1.0",
  "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.0.tgz",
  "integrity": "sha512-ONOEQoKrvXPKk7Su92Co0YMqYO32FfqJTzkKU9u2UpIXyYZIzLSvpdg4AwvSw4mSUW0czu6inK+zby6Oj6gDjQ==",
  "dev": true,
  "requires": 
    "define-properties": "^1.1.3",
    "es-abstract": "^1.17.0-next.0"
  ,
  "dependencies": 
    "es-abstract": 
      "version": "1.17.0-next.1",
      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0-next.1.tgz",

...

这导致我在我的根 node_modules 中安装了 es-abstract 1.16.3 和 1.17.0-next.1 作为 array-includes 的子依赖项（以及其他）。

更改了我的 Jest moduleDirectories 配置后，我的 root node_modules 成为了第一个查找位置。这就是 Jest 文档关于此选项的说法：要递归搜索的目录名称数组向上和设置此选项将覆盖默认值，恰好是node_modules。

所以请检查您的配置是否有此功能：

https://jestjs.io/docs/en/configuration#moduledirectories-arraystring 开玩笑的 https://webpack.js.org/configuration/resolve/ 用于 webpack。

【讨论】：

【参考方案3】：

我在维护者 github 存储库 https://github.com/ljharb/es-abstract/issues/84#issuecomment-567422831 上创建了一个问题

由于我们遇到了完全相同的问题，因此我们采用了评论中描述的想法。在productionflag 下运行webpack 开发构建。对我们来说，所有源映射条目都被保留，我们的开发应用程序是完全可调试的。因此，我们将其用作解决方法。

如果这在未来发生故障，我们可能会分叉所有带有 semver 范围依赖的存储库，并为我们真正过时的遗留存储库自己托管它。

【讨论】：

以上是关于由于“Module not found: Error: Can't resolve”错误，Webpack 突然无法编译的主要内容，如果未能解决你的问题，请参考以下文章

由于目标计算机积极拒绝，无法连接。

我在Android Studio工作，由于系统崩溃，一个或多个功能由于频繁的系统崩溃而崩溃。我应该如何恢复它？

SQL Server 服务由于登录失败而无法启动怎么办

Fiddler由于目标计算机积极拒绝，无法连接的解决方法

为啥我收到“由于保护级别而无法访问”错误？

SVN 由于目标机器积极拒绝，无法连接