Sapper：当离开具有 kwes.io 表单的页面时，如何修复“parentNode is null”？

Question

我正在 SapperJS 中使用 kwes.io 创建联系表单。表格本身有效。

但是一旦我登陆联系页面，我就无法使用 Sapper 链接离开它，但是正常的 https 链接可以工作。

浏览器中的URL改变了，但是内容没有加载。然后加载内容我必须重新加载页面。

我联系了 Kwes 的支持团队，但他们说这与 Sapper 处理路由的方式有关，无法提供帮助。

我创建了这样的表单

<svelte:head>
  <script src="https://kwes.io/js/kwes.js"></script>
</svelte:head>


<div class="kwes-form">
    <form method="POST" action="https://kwes.io/api/foreign/forms/YOUR_FORM_KEY">
        <label for="name">Your Name</label>
        <input type="text" name="name">
        <button type="submit">Submit</button>
    </form>
</div>

在 Chrome 浏览器控制台上打印

Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null

在 Firefox 控制台上这个

TypeError: t.parentNode is null

Answer 1

运行最近陷入这个错误。就我而言，这是由于另一个库更改了 DOM。（就我而言，fontawesome）

调试

我在出错的地方打断点调试的

function detach(node) {
    if (!node.parentNode) debugger; // added breakpoint
    node.parentNode.removeChild(node);
}

我弄清楚是哪个节点导致了错误，并看到它确实不再在 DOM 中（fontawesome 已将其替换为 <svg> 标记）

解决方案

我的解决方案是将节点包装在另一个节点中。所以 svelte 不依赖于被替换的节点。

之前

{#if condition}
  <span class="fa fa-check"/>
{/if}

之后

{#if condition}
  <span>
    <span class="fa fa-check"/>
  </span>
{/if}

Sapper：当离开具有 kwes.io 表单的页面时，如何修复“parentNode is null”？

Sapper: How do I fix `parentNode is null` when navigating away from a page with kwes.io form?

svelte

sapper

调试

解决方案

之前

之后