How can I import node module into svelte component

Question

I'm new to svelte and I am trying to use an installed node module in my dependancies called momentum-slider. In the script tags of my svelte component I have:

import MomentumSlider from "../../node_modules/momentum-slider";
let slider = new MomentumSlider({
   el: ".ms-container",
});

In my component's html markup I have the suggested markup as shown in the tutorial at https://scotch.io/tutorials/building-a-fancy-countdown-timer-with-momentumsliderjs

However, I am getting a typeError in the browser console:

I am new to development in general and I am not sure if this is a problem with momentum-slider or an error on my part. Any insights would be much appreciated.

Cricket

Answer 1

Not sure how to use this library but you should take care of 2 things. First import your package like the following:

import MomentumSlider from "momentum-slider";

Second you need to initialise the MomentumSlider class when the component is mounted using onMount:

import { onMount } from "svelte";
import MomentumSlider from "momentum-slider";

let slider;

onMount(() => {
  slider = new MomentumSlider({ 
    el: ".ms-container"
  });
});

Olsson

Many thanks @johannchopin! The corrections you suggested did the trick. I need to get my head around the lifecycle functions in svelte. I am thinking that onMount is like an eventlistener that listens to when the component has been inserted into the dom and only then runs the code inside. This would explain why the instance of MomentumSlider was failing to query the .container element as it did not yet exist in the html document. Is this line of thinking correct? – Cricket

@Cricket Yep you give a correct explanation of your previous problem +1 – Olsson

So if it solves your problem please validate my answer :) – Olsson

Apologies, I gave it a positive vote but was unaware of how to validate, I've done that now and it should have worked. – Cricket

Answer 2

If you have installed the package properly: npm install momentum-slider the package is listed in your package.json.

When this fits, you just have to import: import MomentumSlider from "momentum-slider";

Asthenic

Many Thanks nologin for your suggestions. I have ammended the import statement as you suggested. momentum-slider is not listed in the package.json file but it is listed in the package-lock.json file. I'm not sure what the difference is between these two files but after following the advice of @Olsson to use the onMount lifecycle hook I have been successful. – Cricket

Fine that it is solved. The import is fixed as I recommended ;) The "onMount" above takes care, that the DOM is already created. – Asthenic

Answer 3

For future reference, some packages use the require method in their documentation for usage in your work. Svelte doesn't really like require so a good alternative is

Instead of: var Validator = require('jsonschema').Validator;

Do this: import { Validator } from "jsonschema";

Volz