Cannot use svelte-loadable it in sapper

[sebastianconcept]

/...../node_modules/svelte-loadable/Loadable.svelte:1
(function (exports, require, module, __filename, __dirname) { <script context="module">
                                                              ^

SyntaxError: Unexpected token <
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
> Server crashed

Node v10.15.1
    "sapper": "^0.27.0",
    "svelte": "^3.12.1",
    "svelte-loader": "^2.13.6"

[CaptainN]

I think this is a config issue in either rollup or webpack. Check out this readme section for using external packages.

[kaisermann]

Yeah 🕺 nothing to do with svelte-loadable. Closing it 😁

[sandrina-p]

Hum @kaisermann what was the fix? I'm having the same issue.

[sandrina-p]

Figured it out! This package isn't needed with Sapper, Sapper supports dynamic components out of the box.

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

  let MyComponent;

  onMount(async () => {
    const module = await import('my-non-ssr-component');
    MyComponent = module.default;
  });
</script>

<svelte:component this={MyComponent} foo="bar"/>

[kaisermann]

@sandrina-p They can actually work together. svelte-loadable only wraps and add some functionalities for loading dynamic components, it has nothing to do with how the dynamic import will be understood by a bundler/browser 😁 . You can rewrite that example with svelte-loadable in the following way:

<script>
  import Loadable from 'svelte-loadable'
</script>

<Loadable loader={() => import('my-non-ssr-component')} foo="bar"/>

[sandrina-p]

@kaisermann I tried that but it didn't work, I had the same error as @sebastianconcept :/

[kaisermann]

@sandrina-p That was quick 😆 Would you be able to share a simple repro with the issue happening? It's probably a config problem, but I can see I manage to fix it!

[sandrina-p]

@kaisermann sure! You can see it on this project commit (the next commit reverts the error).

And actually I think I know why it didn't work! It's because I installed svelte-loadable as a dependency instead of devDependency! I tried right now to install it as devDependency and it worked! It's something that could be improved on README, clarify to install it as devDep. :)

[kaisermann]

I'm going to take a look at it when I get some free time. And it should be a common dep 😱! It's going to be used in the final code that runs on the browser. 🤔🤔🤔