爬虫代码已复制

Uncaught TypeError: htmx.Swap is not a function

Uncaught TypeError: htmx.Swap is not a function

在使用 htmx 开发一个产品的时候,使用 htmx.Swap JavaScript API 函数时,在浏览器控制台输出了以下异常信息:

Uncaught TypeError: htmx.Swap is not a function

我引用的 2.0.3 版本的 htmx.min.js 文件是通常官方文档中安装章节里的 URL 直接下载到本地然后引用的。就是如下中的 src 的 URL。

<script src="https://unpkg.com/htmx.org@2.0.3/dist/htmx.js" integrity="sha384-BBDmZzVt6vjz5YbQqZPtFZW82o8QotoM7RUp5xOxV3nSJ8u2pSdtzFAbGKzTlKtg" crossorigin="anonymous"></script>

出现这种问题,确认过自己的代码没错,也试过大小写等写法,都报同样的错误,第一时间就想到了是不是 htmx 的 Bug。然后就去官方查看,发现最新版是 2.0.4,于是就下载了新的版本,但也出现同样的错误。

于是就到 htmx 官方的 GitHub 仓库上查看解决方法,发现没有相关的问题,就提了新的 Issue。有不少热心的网友都提出了一些建议,前面的我都一一试过后都不行。 直到一个老哥的出现彻底帮我解决了这个问题。

Uncaught TypeError: htmx.Swap is not a function

经他这么一提醒,我就在浏览器控制台上通过以下代码打印了我下载的 2.0.3 版本的 htmx.js 的版本号,发现输出的结果居然是 1.9 的。

console.log(htmx.version)
// 1.9

这就有点坑了,应该是官方的文档里面的某些链接指向版本是有问题的。使用那位老哥提醒的链接重新下载就没问题了。

<script src="https://unpkg.com/htmx.org@2.0.4"></script>

在写这篇文章的时候重新到官网检查了一下几个链接,下载下来的都是正常的,也不知道是我当时搞错了还是真的有版本的问题而且官网修正了这个问题。

把出现异常的代码也放出现供大家参考:

<button onclick="htmx.Swap('#result', 'something new.', {swapStyle: 'innerHTML'});">Swap Test</button>
<div id="result" class="result success"></div>