Dynamic imports fail to load in dev SSR

Describe the bug When importing modules dynamically in a page’s load function, it only works when the import is a static string and using single/double quotes (not backticks). However, they work in production. It works client-side in dev as well.

Logs No logs other than the error itself (check the stack trace)

To Reproduce

Add this to any route component or download this repro https://github.com/mattjennings/sveltekit-dynamic-import-bug

<script context="module">
  export async function load({ page }) {
    await import("../lib/Template.svelte"); // works
    await import(`../lib/Template.svelte`); // does not work (note the backticks)
    await import(`../lib/${page.params.slug}.svelte`); // does not work
    await import("../lib/" + "Template" + ".svelte"); // does not work

    return {
      props: {},
    };
  }
</script>

Expected behavior All imports in snippet should work in dev

Stacktraces

The same error happens for every bad import. Unfortunately, it’s not a very helpful error. It would be nice to include a bit more info.

Stack trace

failed to load module for ssr: ../lib/Template.svelte
Error: failed to load module for ssr: ../lib/Template.svelte
    at instantiateModule (/Users/mattjennings/Desktop/dynamic/node_modules/.pnpm/vite@2.2.4/node_modules/vite/dist/node/chunks/dep-2c03f3f9.js:69022:15)

Information about your SvelteKit Installation:

Diagnostics

• System: OS: macOS 11.2.3 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Memory: 97.98 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 15.11.0 - ~/.nvm/versions/node/v15.11.0/bin/node Yarn: 1.22.10 - ~/.nvm/versions/node/v15.11.0/bin/yarn npm: 7.6.0 - ~/.nvm/versions/node/v15.11.0/bin/npm Browsers: Brave Browser: 90.1.23.75 Chrome: 90.0.4430.93 Safari: 14.0.3 Safari Technology Preview: 14.2 npmPackages: @sveltejs/kit: next => 1.0.0-next.96 svelte: ^3.34.0 => 3.38.2 vite: ^2.2.3 => 2.2.4

• Chrome

• Tried with no adapter & vercel adapter

Severity It’s annoying in dev but navigating to the page client-side is a fine workaround for now, and it works in production so it’s not critical.

Additional context My specific use-case here was to load a .md file dynamically from a param in the route.

[benblazak]

For anyone running across this because it’s one of the only google results for Unknown variable dynamic import.

I was getting this error when building (not in dev) because the variable I had in my dynamic import had a / in it. Turns out vite doesn’t like that: https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#globs-only-go-one-level-deep .

[Eugeniegrandit]

Thank you @vish01! I tried to change my path a little and it worked. Actually, the folder I was trying to access is in the same folder as my file, but instead of ./ I used …/…/src/routes/ and surprisingly, the warning disappeared in the console. Thanks!