"404: not found" error on SolidJS project deployed to Vercel

Question

I recently created a personal website using SolidJS, with server side rendering and typescript enabled. I attempted to deploy this site to Vercel, with the only change from the base Vercel settings being that I changed the Output Directory to 'dist'. However, after deploying the site I am getting a 404 error. You can find the uploaded site (and the error) here, and the github repo for my solidjs project here. I have also attached a screenshot of my Vercel Build & Development Settings. Does anyone have any advice on how to fix this issue? Thank you!

Answer 1

The answer was to change my vite config to plugins to ''' plugins: [solid({adapter: vercel()})], '''

Answer 2

Adding on to @Harry Alberts answer:

You'll need to npm i solid-start-vercel to install SolidJS Adapter for Vercel

Then add:

import vercel from "solid-start-vercel";

to the vite.config.ts file along with this:

export default defineConfig({
    plugins: [
        solid({ adapter: vercel({ edge: true }) })
    ],
});

I tried this solid({ adapter: vercel() }) but got an error since the vercel() function expects an argument of type SolidStartVercelOptions which has these as keys:

{
  edge: boolean,
  includes: string | string[],
  excludes: string | string[],
  prerender: PrerenderFunctionConfig
}

And if you have the vercel cli installed, run this:

vercel env add ENABLE_VC_BUILD

and set the the value of ENABLE_VC_BUILD to 1

Hope this is enough information for those needing it.

Reference:

SolidJs Vercel Adapter Github

SolidJS Github Issue About Vercel