(Bug?) require is not defined

[YogliB]

Hey, I'm trying to use svelte-loadable with svelte-routing as seen in the example, and I'm getting an error in the browser console:

App.svelte:7 Uncaught ReferenceError: require is not defined
    at Object.resolve (App.svelte:7)
    at register (Loadable.svelte:21)
    at App.svelte:5
    at main.ts:5

This is my App.svelte:

<script context="module">
  import { register } from "svelte-loadable";

  // Loaders must be registered outside of the render tree.
  const HomeLoader = register({
    loader: () => import("./routes/home/Home.svelte"),
    resolve: () => require.resolve("./routes/home/Home.svelte"),
  });
</script>

<script>
  import { Router, Link, Route } from "svelte-routing";
  import Home from "./routes/home/Home.svelte";
  import Loadable from "svelte-loadable";

  export let url = "";
</script>

<Router {url}>
  <Route path="/">
    <Loadable loader={HomeLoader} />
  </Route>
</Router>

BTW, if I do () => import("./routes/home/Home.svelte") in the resolve function everything is OK.

[x4080]

Is it faster than using loading when onMount? And do use it in svelte or sapper?

[YogliB]

No idea, and I tried using it with Svelte, using Snowpack.

[x4080]

@YogliB thanks

[x4080]

I can confirm that using () => import("./routes/home/Home.svelte") solve the problem

[kaisermann]

If I'm not mistaken, require.resolve is only available in webpack produced builds. The return of the resolve method is used as an ID for that specific import so it's findable in an SSR context. If you don't need to handle SSR, you can just use the good old () => import().