使用NPM传递依赖冲突编译shadow-cljs项目

Question

我试图通过使用shadow-cljs中的NPM支持来利用react-bootstrap模块。

首先，我在package.json中将react-bootstrap和bootstrap添加到项目中。
$ yarn add react-bootstrap bootstrap

然后在我的项目中引入react-bootstrap
(ns myproject.core (:require ["react-bootstrap" :as bs]))

结果是在控制台中出现运行时异常
TypeError: (0 , _uncontrollable.default) is not a function
...这很奇怪，在第一次热重载后会消失。

这个异常可能表明嵌套NPM依赖中存在冲突。我该如何识别和解决这个问题呢？

Answer 1

有几种方法可以追踪这类问题。

也许首先应该有点背景。目前JS社区正处在转型期，他们正在寻找如何正确地进行CommonJS和ES6（ES模块）的互操作性。 babel和webpack最初都支持一种“兼容性”模式，但这不是很干净，将在webpack5发布后弃用。因此，任何查看.default的东西都立即显得可疑，这确实是这个问题的原因。

首先，我们需要确定_uncontrollable是什么。您可以通过查看源代码来完成这项工作。您可以在Chrome的开发者工具中检查“捕获异常时暂停”，这将使调试器在相关位置和源中启动。您将找到

var _uncontrollable = _interopRequireDefault(require("uncontrollable"));

所以它包括了uncontrollable npm包。快速检查node_modules/react-bootstrap/package.json文件，我们发现在其中它将“"uncontrollable": "^7.0.0"”声明为一个依赖项。

用npm list快速检查发现，另一个依赖项仍然需要旧版本的uncontrollable。（输出已修剪以显示相关部分）。

├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ ├─┬ [email protected]

鉴于这是一个不同的大版本，我认为它们可能不兼容。

这可能与webpack一起工作，因为它将在构建中包含uncontrollable的两个版本。但是shadow-cljs不支持嵌套安装，因为我们不想有重复的包。