Svelte - Uncaught TypeError: Cannot read properties of undefined

Question

I'm trying to access an Object method outside the onMount, but I'm having an issue. I initialized the object inside the onMount, and I thought declaring the variable globally would solve the issue, but it didn't, so now I'm at a loss.

This is what I initially had. The code gave me an exception on slider.getInfo() saying that the object is possibly 'undefined.'

import { onMount } from "svelte";
import {tns} from "tiny-slider/src/tiny-slider.js";

let slider

onMount(()=>{
  slider = tns({
    container: ".my-slider",
    slideBy: 1,
    speed: 1000,
    nav: false,
    controls: false,
    autoplay: true,
    autoplayButtonOutput: false,
    responsive: {
      1024: {
        items: 4,
      }
    },
  })
})

let sliderInfo = slider.getInfo()

Next I tried putting it in a function and calling the function.

import { onMount } from "svelte";
import {tns} from "tiny-slider/src/tiny-slider.js";

let slider

onMount(()=>{
  slider = tns({
    container: ".my-slider",
    slideBy: 1,
    speed: 1000,
    nav: false,
    controls: false,
    autoplay: true,
    autoplayButtonOutput: false,
    responsive: {
      1024: {
        items: 4,
      }
    },
  })
})

function setInfo(){
  let sliderInfo = slider.getInfo()
  console.log(sliderInfo)
}
setInfo()

This time the code gave me the following error

Uncaught TypeError: Cannot read properties of undefined (reading 'getInfo')

Finally, just because I wanted to see if I could somehow get it to work, I created a button and assigned the function as a handler, and surprisingly this worked. Although I have no idea why this works compared to what I previously tried.

import { onMount } from "svelte";
import {tns} from "tiny-slider/src/tiny-slider.js";

let slider

onMount(()=>{
  slider = tns({
    container: ".my-slider",
    slideBy: 1,
    speed: 1000,
    nav: false,
    controls: false,
    autoplay: true,
    autoplayButtonOutput: false,
    responsive: {
      1024: {
        items: 4,
      }
    },
  })
})

function setInfo(){
  let sliderInfo = slider.getInfo()
  console.log(sliderInfo)
}

...

<button on:click={setInfo}>Click</button>

Unfortunately, the method that worked is not what I'm trying to do, but the first method instead. However I can't figure out why the first method doesn't work. Any help is appreciated.

brunnerh · Accepted Answer · 2022-08-26 16:22:09Z

3

onMount registers a callback, which is executed when the component mounted as DOM, that is, it will not execute immediately, so it will execute after the code you placed below it. (Whether it is wrapped in a function that is called immediately or not, does not matter.)

The click event on the other hand happens much later, after all the DOM already has to be there to interact with it, hence the callback within onMount has been called already and slider has been set.

How this should be dealt with depends on what you are trying to do. If you just need some code within the component to run, you can just add it to the onMount callback as well. If another component needs to do something, you can e.g. dispatch an event at the end of onMount.

answered Aug 26, 2022 at 16:22

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tchaly Leandre Jr. Over a year ago

I just want to call the sliders getInfo() function outside of the onMount and set it to a variable (my first section of code). What would I do then? @H.B.

brunnerh Over a year ago

Why would you have to do that outside? Just declare the variable like slider and assign it in onMount. Also, setting a variable is not a goal, it's a means to a goal, it is not what matters here.

Collectives™ on Stack Overflow

Svelte - Uncaught TypeError: Cannot read properties of undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related