[svelte] Runtime Error -> Uncaught ReferenceError: __styles__ is not defined

[s0kil]

There is a warning:

(!) svelte plugin: $: has no effect outside of the top-level
src/components/Modal/Modal.svelte
46: 
47: onMount(() => {
48:   $: __styles__ = loadAsset(["https://js.stripe.com/v3"], "stripe", {
      ^
49:     numRetries: 3
50:   });

There seems to be an error somewhere, __styles__ is assigned to the wrong function.

Here is the component code:

<script>
  import { onMount } from "svelte";
  import loadAsset from "loadjs";
  import styled from "reshadow";

  import { connect } from "../../model";

  import Header from "./Header.svelte";
  import Footer from "./Footer.svelte";
  import LoginForm from "../LoginForm.svelte";
  import OrderList from "../OrderList.svelte";
  import Cart from "../Cart.svelte";
  import Checkout from "../Checkout.svelte";

  export let stripeKey;

  //! Uncaught ReferenceError: Cannot access 'open' before initialization
  let open, route, stripe;

  const [dispatch, modal] = connect("modal");

  $: open = $modal.open;
  $: route = $modal.route;

  $: currentRoute = route => {
    switch (route) {
      case "login":
        return LoginForm;

      case "orders": {
        return OrderList;
      }

      case "shipping":
      case "billing":
        return Checkout;

      case "cart":
      default:
        return Cart;
    }
  };

  function handleCloseEvent(event) {
    if (open) {
      dispatch("modal/closeModal");
    }
  }

  onMount(() => {
    loadAsset(["https://js.stripe.com/v3"], "stripe", {
      numRetries: 3
    });

    loadAsset.ready("stripe", {
      success: () => {
        stripe = Stripe(stripeKey);
      },
      error: () => {
        console.error("Moltin Btn - Stripe failed to load");
        return null;
      }
    });
  });

  styled`
    .shopkit-modal {
      transition: all 0.3s ease;
      background-color: #fff;
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      overflow-y: scroll;
      height: 100%;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      z-index: 1000000001;
      padding: 1.5rem;
      width: 100%;
      border-width: 0;
      max-width: 500px;
      opacity: ${open ? 1 : 0};
      visibility: ${open ? "visible" : "hidden"};
      transform: translateX(${open ? 0 : "525px"});
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
      font-size: 15px;
    }

    .shopkit-modal-overlay {
      transition: all 0.3s ease;
      background-color: #333;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000000000;
      opacity: ${open ? 0.3 : 0};
      visibility: ${open ? "visible" : "hidden"};
      overflow-x: ${open ? 100 : 0};
    }
  `;
</script>

<style>
  *,
  *::before,
  *::after {
    box-sizing: inherit;
    -webkit-font-smoothing: antialiased;
  }
</style>

<div class="shopkit-modal-overlay" on:click="{handleCloseEvent}" />

<div class="shopkit-modal">

  <Header {route} />

  <svelte:component this={currentRoute(route)} />

  <Footer />
</div>