sapper icon indicating copy to clipboard operation
sapper copied to clipboard

Styles crashing sapper vercel build

Open obrunsmann opened this issue 5 years ago • 9 comments
trafficstars

I have a simple primary button component with some included styles. Deploying this component to vercel crashing the hole app with:

Failed to fetch dynamically imported module: https://xxx.vercel.app/client/index.1b6f5871.js

This is the full component:

<script>
  export let disabled = false,
    loading = false;
</script>

<style>
  .loading-wrap {
    height: 3rem;
    display: flex;
    align-items: center;
  }

  button {
    background-image: linear-gradient(
      to right,
      #f0972f 0%,
      #f2b62f 50%,
      #f0c22f 100%
    );
    color: black;
    font-weight: 500;
    padding: 5px 15px;
    border-radius: 2.5px;
    transition: 200ms ease-in-out;
    height: 3rem;
  }

  .button--disabled {
    cursor: not-allowed;
    filter: grayscale(100%);
  }
</style>

{#if loading === true}
  <span class="loading-wrap {$$props.class}">
    <i class="fas fa-spinner fa-spin" />
  </span>
{:else}
  <button {...$$props} on:click class:button--disabled={disabled}>
    <slot />
  </button>
{/if}

After trying around with several deploys I found out that the hole style block is crashing the app. I tried several things. When removing the hole style block the component renders again. When reducing the style block to only one test class, it works neither.

Browser console output:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

obrunsmann avatar Aug 26 '20 11:08 obrunsmann