sapper
sapper copied to clipboard
Styles crashing sapper vercel build
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.