Svelte "Uncaught TypeError: Failed to set the 'value' property on 'HTMLProgressElement'"

Viewed 381

I'm new to coding and I have no clue what tiggers this error. I'm using svelte and the VSCode returns no error but the site doesn't load and leaves this error message on the inspect console.

index.mjs:207 
Uncaught TypeError: Failed to set the 'value' property on 
'HTMLProgressElement': The provided double value is non-finite.
    at Object.create [as c] (index.mjs:207)
    at create_component (index.mjs:1380)
    at Object.create [as c] (progress.svelte:7)
    at init (index.mjs:1472)
    at new App (App.svelte:6)
    at main.js:3
    at main.js:

The two files App and Progress goes as follows app:

import { Router, Link, Route } from "svelte-routing";
import Navbar from './template/navbar.svelte';
import Progress from "./template/progress.svelte";
  let y 
</script>
<svelte:window bind:scrollY = {y}/>
<Navbar></Navbar>
<Progress></Progress>
<div class="main">

</div>
<style>
  .main{
    margin-top: 125px;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    height: 100%;
    border: 2px solid black;
    background-color: white;
    border-radius: 25px;
  }
</style>

and Progress:

<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
let y
  const progress = tweened(0, {
    duration: 1000,
    easing: cubicOut
    });
</script>
<svelte:window bind:scrollY={y}/>
<progress value={y/500}></progress>
<style>
      progress{
    display: block;
    position: fixed;
    width: 79%;
    margin-left: 10%;
    margin-right: 10%;
    height: 25px;
    
  }
</style>

Sorry if this posts sucks btw. I'm dumb.

1 Answers

It happens because you're setting the value of the progress to undefined / 500 initially. This apparently triggers a runtime errors that breaks the state of the app (by abruptly interrupting Svelte's operation in its middle).

Initialize your y variable to fix it:

let y = 0
Related