Саппер: Как я могу исправить `parentNode is null` при переходе от страницы с формой kwes.io? - PullRequest
Новая
       10

Саппер: Как я могу исправить `parentNode is null` при переходе от страницы с формой kwes.io?

0 голосов
/ 08 ноября 2019

Я создаю контактную форму, используя kwes.io внутри SapperJS. Сама форма работает.

Но как только я попадаю на страницу контактов, я не могу отойти от нее, используя ссылки Sapper, но обычные ссылки https работают.

URL-адрес в браузере изменяется, но содержимое не загружается. Затем, чтобы загрузить контент, мне нужно перезагрузить страницу.

Я связался со службой поддержки Kwes, но они говорят, что это как-то связано с тем, как Саппер обрабатывает маршрутизацию и не может помочь.

Я создал свою форму следующим образом 

<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 голосов
/ 12 ноября 2019

Недавно столкнулся с этой ошибкой. В моем случае это было связано с другой библиотекой, изменяющей 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}
...