Webpack突然无法编译,出现“找不到模块:错误:无法解析”的错误。

12
截至昨天下午,我们的JavaScript单元测试套件开始出现故障。没有任何测试运行,并且Webpack报告了一系列模块未找到错误后构建失败。以下是我们的构建堆栈:
Node 6.11.5(是的,我知道,非常旧) Karma 1.7.1 Webpack 2.2.1 React 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 shims)或es-abstract项目本身报告任何问题。此外,查看一些受影响项目的CI构建,它们似乎仍然报告测试通过。
我们不知道该怎么办。我已经尝试了清除node_modules并从头开始进行npm install,将Node升级到v8 LTS,将Enzyme和React适配器降级以尝试拉取旧版本的es-abstract(这不起作用,因为它们的package.json文件仍然要求^1.17.0-next.1,这对我来说毫无意义,因为其中一些版本已经一年了)。但什么都没用。

1
我们也遇到了同样的问题。我在 https://github.com/ljharb/es-abstract/issues/83 上创建了一个问题。你可以从那里获取通知和解决方案。 - slnkykrn
我们还使用固定版本来避免这样的问题 - 其中之一是一个名为react-dates@10.1.1的库 <- 这是一个3年前的版本。不幸的是,React dates有一个依赖于“airbnb-prop-types”:“^2.4.1”的动态版本 -> airbnb-prop-types 2.15最新版本刚刚在几天前发布,其中包括es-abstract@1.17.0-next.1版本。 - noa-dev
由于添加了需要的动态版本的库似乎不再得到适当的维护(443个未解决的问题和70个未处理的PR),我将对其进行分支并自行托管。 - noa-dev
“动态应用程序需要什么”?enzyme得到了完全的维护,airbnb-prop-types也是如此。这只是webpack的错误配置,没有其他问题。请在GitHub上提交问题以解决这些问题。 - LJHarb
https://github.com/ljharb/es-abstract/issues/84#issuecomment-567634975 - Gabriel Ferrarini
显示剩余3条评论
3个回答

2

这是一个与Webpack或Jest配置相关的问题。

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

相对路径将类似于Node扫描node_modules,通过查找当前目录及其祖先(即./node_modules、../node_modules等)来进行扫描。

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

webpack.config.js

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

使用相对路径来引用 node_modules


1
我遇到了这个问题,并通过修复我的Jest模块解析设置来解决它。
目前的情况是,我的package-lock包括:
"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,而array-includes(以及其他一些)的子依赖项中安装了1.17.0-next.1。

更改了我的Jest moduleDirectories配置后,使得我的根目录的node_modules成为第一个查找位置。这是Jest文档对此选项的解释:要递归搜索的目录名称数组向上设置此选项将覆盖默认值,默认值恰好为node_modules
因此,请检查您的配置是否支持此功能:

0

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

由于我们遇到了完全相同的问题,我们采用了一种评论中描述的想法。在production标志下运行webpack开发生成版本,这样对于我们来说,所有的源映射条目都会被保留,我们的开发应用程序将是完全可调试的。所以我们使用它作为解决方法。

如果将来出现问题,我们可能会分叉所有使用semver范围依赖项的存储库,并为我们真正过时的遗留代码托管它们。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接