Sapper：使用kwes.io表单离开页面时，如何解决“ parentNode为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。 （就我而言，真棒）

调试

我通过在发生错误的地方放置一个断点来调试它

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

我弄清楚是哪个节点引起了错误，并发现确实不在DOM中（fontawesome已将其替换为<svg>标记）

解决方案

我的解决方案是将节点包装在另一个节点中。这样才不会依赖于要替换的节点。

之前

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

之后

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