使用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`的都 immediately vigilant，并且确实是这个问题的原因。

首先，我们需要确定`_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不支持嵌套安装，因为我们不想重复安装包。