SvelteKit build is working fine locally but on vercel it blews up?

Question

I am trying out the SvelteKit framework and playing with it. I build a dummy page and don't have any issue with the dev command and the build command finding components and sections. However, when I try to deploy it on the Vercel, Vite seems to be having trouble finding components.

[vite:load-fallback] Could not load /vercel/path0/src/sections/About.svelte (imported by src/routes/index.svelte): ENOENT: no such file or directory, open '/vercel/path0/src/sections/About.svelte'

This is the config file I set up module alias and Vercel adapter.

import vercel from '@sveltejs/adapter-vercel';
import { resolve } from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        // adapter: adapter(),
        adapter: vercel(),
        vite: {
            resolve: {
                alias: {
                    $src: resolve('./src'),
                    $components: resolve('./src/components'),
                    $sections: resolve('./src/sections')
                }
            }
        }
    }
};

export default config;

By default, Vercel CLI detecting output directory to be public but I overrode it by vercel_build_output. I also tried with auto adapter resulted in same issue. I tried deployment using github repo directly and with vercel cli too encountered the same issue. I tried it without alias too giving relative import like ../components resulted in same issue their too.

Answer 1

You're filenames is Sidebar.svelte with a lowercase b while when you try to import it, it's SideBar.svelte with capital B