Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SvelteKit - failing on import... any ideas?

See original GitHub issue

<script>
    import Carousel from "svelte-carousel";
</script>

Cannot use import statement outside a module
C:\...\app\node_modules\svelte-carousel\src\main.js:1
import Carousel from './components/Carousel/Carousel.svelte'

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at nodeRequire (C:\...\app\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68211:17)
    at ssrImport (C:\...\app\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68164:20)
    at eval (/src/embed/calc/CalcMortgagePayment.svelte:7:31)

Issue Analytics

State:
Created 2 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

11reactions

vadimkorrcommented, May 30, 2021

When using with SvelteKit do the following:

The official workaround is:

Install it as a dev dependency: npm install svelte-carousel -D
Import it like this:

<script>
  import { onMount } from 'svelte';

  let Carousel;
  onMount(async () => {
    const module = await import('svelte-carousel');
    Carousel = module.default;
  });
</script>

<svelte:component this={Carousel}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</svelte:component>

How do I use a client-side only library that depends on document or window? why -D ?

2reactions

OClementcommented, Mar 18, 2022

FYI: This issue is back on 1.0.17-rc4 (latest as of this writing) Downgrading to 1.0.16 and using the workwaround above still works