Sapper:使用kwes.io表单离开页面时,如何解决“ parentNode为null”?

时间:2019-11-08 14:43:28

标签: svelte sapper

我正在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

1 个答案:

答案 0 :(得分: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}