External Dependencies not working in Nav.svelte

Question

I am trying to load sv-bootstrap-dropdown module in nav.svelte component but I am getting the error <Dropdown> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. After that I tried to install that as devDependency but than I was getting the error that Cannot read property remove of undefined. This gets generated itself in the server js file under the sapper folder

Answer 1

When working with svelte and sapper you to have think about 2 types of rendering : client side rendering (sveltjs, js) and server side rendering (SSR), it's sapper (nodejs or expressjs), there are a few ways to handle this, but according to the document of dependency you are using :

for SSR you consider to import like this:

import {
      Carousel,
      CarouselControl,
      CarouselIndicators,
      CarouselItem,
      CarouselCaption
    } from 'sveltestrap/src';

solve it by importing from the src folder of the package.