failed to fetch dynamically imported module in vercel deployment

Describe the bug

I’m trying to dynamically import components in my SvelteKit app. It works fine in development mode but when I deploy to Vercel, it breaks.

The paths for the loaded files is here. I then import the data in this component where I map over them here.

I’m not sure why this is happening but I have no issues doing this on local dev. Only in prod does it break.

Reproduction

I don’t have any particular set of steps other than the files I linked above and the methods I used there.

Logs

GET https://www.jannatinnaim.com/_app/immutable/components/pages/_SocialSectionGitHub.svelte net::ERR_ABORTED 404

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://www.jannatinnaim.com/_app/immutable/components/pages/_SocialSectionGitHub.svelte

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 128.95 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.asdf/installs/nodejs/16.17.1/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/16.17.1/bin/yarn
    npm: 8.19.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 107.0.5304.87
    Edge: 107.0.1418.35
    Firefox: 106.0.5
    Safari: 16.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.87 
    @sveltejs/kit: next => 1.0.0-next.539 
    svelte: ^3.44.0 => 3.52.0 
    vite: ^3.1.0 => 3.2.2

Severity

serious, but I can work around it

Additional Information

No response

[dummdidumm]

This isn’t related to adapter-vercel. The problem is that the request is made relative to the current file, and those files live somewhere else to each other on prod. You can observe the same behavior when running preview after build locally. Instead, you should make the dynamic import so that Vite can determine the correct path from it. In _Social.svelte, do this:

  const getSectionComponent = () => {
      return import(`./_SocialSection${selectedSection}.svelte`).then((component) => component.default);
  };

More info about dynamic imports in the context of Vite: https://vitejs.dev/guide/features.html#dynamic-import

[jNaimXIII]

I see. Thanks for the help.