Server returns "Not Found"

takechihorn commented 3 years ago

Hi I cloned it and deployed it to Vercel.(https://vitesse-suspense-test.vercel.app/) I recognized this App was in SSR, but index.html(Inspect → Source) returned from server didn't include any content. I assume that this problem comes from the failure of rendering. Does anyone know how to fix this.

<div all="index.html" server="true" message="This is page "ALL"">Not found</div>

frandiox commented 3 years ago

@takechihorn Hi! Not sure what the problem is in your project but you can have a look at this example using suspense with vite-ssr: https://github.com/frandiox/vite-ssr/issues/8

Also, one problem I noticed with @vueuse/head@0.5.1 and async setups, you need to call useHead function before having any await in the setup. Otherwise it will tell you something like "you forgot to call app.use(head)".

Please tell me if you can fix it following that information.

takechihorn commented 3 years ago

@frandiox Thank you for your response. I cloned your project and tried pnpm build pnpm deploy https://vitesse-suspense-test.vercel.app/ useHead was already set at App.vue. app.use(head) was also set at main.ts.

node v14.15.0 npm 7.6.3 vercel@latest

However, It returned HTML below. I can't understand why it doesn't offer correct HTML. <div all="index.html" server="true" message="This is page "ALL"">Not found</div>

frandiox commented 3 years ago

@takechihorn I've checked your code and I think you need to move Suspense to App.vue like in the issue I linked in my previous comment 🤔

takechihorn commented 3 years ago

@frandiox Thank you for checking my code. Though I moved Suspense to App.vue, Not Found wasn't disappeared. I don't understand what's going on. Please tell me if it was wrong. https://vitesse-suspense-test-takechihorn.vercel.app https://github.com/takechihorn/vitesse-suspense-test

chujanen commented 3 years ago

@frandiox and @takechihorn I think I am seeing a similar issue. I am doing the following:

git clone ...
pnpm install
pnpm build

These steps all work:

❯ pnpm build

> @ build /Users/chujanen/Documents/code/testing/vitetest/my-vitesse-app
> pnpm clean && cross-env NODE_ENV=production vite-ssr build && ./scripts/move-dist.sh

> @ clean /Users/chujanen/Documents/code/testing/vitetest/my-vitesse-app
> rm -rf dist && rm -rf serverless/public && rm -rf serverless/api/renderer

vite v2.1.5 building for production...
✓ 82 modules transformed.
dist/client/index.html                    1.11kb
dist/client/manifest.webmanifest          0.38kb
dist/client/registerSW.js                 0.13kb
dist/client/manifest.json                 3.36kb
dist/client/ssr-manifest.json             5.20kb
dist/client/assets/README.772426b8.js     0.96kb / brotli: 0.38kb
dist/client/assets/[...all].a1bf4aa7.js   0.25kb / brotli: 0.18kb
dist/client/assets/about.68c39e47.js      1.57kb / brotli: 0.56kb
dist/client/assets/[name].49adc410.js     1.44kb / brotli: 0.74kb
dist/client/assets/home.2278cad3.js       0.38kb / brotli: 0.24kb
dist/client/assets/en.ba60c5c3.js         0.74kb / brotli: 0.25kb
dist/client/assets/404.131333f2.js        1.12kb / brotli: 0.57kb
dist/client/assets/es.7e7714ee.js         0.76kb / brotli: 0.29kb
dist/client/assets/fr.1173ee0c.js         0.77kb / brotli: 0.29kb
dist/client/assets/it.f960f036.js         0.76kb / brotli: 0.29kb
dist/client/assets/ja.c3e907af.js         0.69kb / brotli: 0.32kb
dist/client/assets/ko.2cf3595f.js         0.67kb / brotli: 0.31kb
dist/client/assets/tr.3a5ea217.js         0.75kb / brotli: 0.32kb
dist/client/assets/vi.cd0bd6ab.js         0.52kb / brotli: 0.27kb
dist/client/assets/zh-CN.1e1b42d2.js      0.66kb / brotli: 0.28kb
dist/client/assets/index.a133aadc.css     17.60kb / brotli: 3.59kb
dist/client/assets/index.8fe815a1.js      39.51kb / brotli: 12.58kb
dist/client/assets/vendor.f81e899f.js     74.75kb / brotli: 25.97kb
vite v2.1.5 building SSR bundle for production...
[plugin:replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
✓ 51 modules transformed.
dist/server/manifest.webmanifest   0.38kb
dist/server/registerSW.js          0.13kb
dist/server/main.js                75.04kb

But when I look in my dist/client directory, the index.html is missing.

Shouldn't it be there? Is there something I am not understanding?

nicholasoxford commented 3 years ago

I am also try to deploy to vercel with no luck. Everything works perfectly with pnpm preview, but I have never been able to deploy successfully.

I wonder if it has to do with the build commands. But as @chujanen says, I can't find an index.html in client, after running pnpm build (which runs vite-ssr build)

pnpm deploy

> dreamland@ deploy /Users/nicholas.oxford/Documents/Dreamland/vercel/my-vitesse-app
> cd serverless && vercel

Vercel CLI 21.3.3
🔍  Inspect: https://vercel.com/maheledaily-gmailcom/serverless/BUoGnG5VTTdBBdCqbnjmsNA318dN [3s]
✅  Production: https://serverless-rouge-gamma.vercel.app [copied to clipboard] [2m]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/maheledaily-gmailcom/serverless/settings

frandiox commented 3 years ago

@chujanen @nicholasoxford Did you install dependencies also in serverless directory? Vite is not bundling some dependencies so for now we need to install them separately there as well. Use npm there instead of pnpm since I don't think Vercel supports the latter. Theoretically, only the package-lock.json is needed but you might need to add extra dependencies that you use in your application.

But when I look in my dist/client directory, the index.html is missing. Shouldn't it be there? Is there something I am not understanding?

This is expected, the index.html is "embedded" in the server code.

Other than that, I just deployed this template yesterday and didn't have any issue 🤔 Does it work for you if you try to deploy this without modifying anything?

nicholasoxford commented 3 years ago

I tried npm install on my project and got the same results. I tried from a blank template and got:

I tried what you said on both the repo I am working on and a fresh one with the same results. I shared repo access to my local project.

frandiox commented 3 years ago

@nicholasoxford can you see anything in the logs?

nicholasoxford commented 3 years ago

23:53:26.329    Retrieving list of deployment files...
23:53:27.984    Downloading 43 deployment files...
23:53:28.315    Analyzing source code...
23:53:28.752    Installing build runtime...
23:53:29.276    Build runtime installed: 523.134ms
23:53:29.870    Installing build runtime...
23:53:30.387    Build runtime installed: 516.633ms
23:53:30.979    Installing build runtime...
23:53:31.506    Build runtime installed: 526.435ms
23:53:32.097    Installing build runtime...
23:53:32.596    Build runtime installed: 499.619ms
23:53:33.188    Installing build runtime...
23:53:33.738    Build runtime installed: 550.699ms
23:53:34.328    Installing build runtime...
23:53:34.852    Build runtime installed: 524.144ms
23:53:37.312    Looking up build cache...
23:53:37.455    Looking up build cache...
23:53:37.456    Looking up build cache...
23:53:37.518    Looking up build cache...
23:53:37.518    Build cache found. Downloading...
23:53:37.570    Build cache found. Downloading...
23:53:37.599    Looking up build cache...
23:53:37.601    Build cache found. Downloading...
23:53:37.623    Build cache found. Downloading...
23:53:37.741    Build cache found. Downloading...
23:53:37.959    Build cache downloaded [2.39 MB]: 443.83ms
23:53:38.042    Build cache downloaded [2.39 MB]: 418.98ms
23:53:38.057    Build cache downloaded [2.39 MB]: 487.431ms
23:53:38.106    Build cache downloaded [2.39 MB]: 504.357ms
23:53:38.155    Build cache downloaded [2.39 MB]: 417.26ms
23:53:39.024    Installing dependencies...
23:53:39.217    Installing dependencies...
23:53:39.426    Installing dependencies...
23:53:39.473    Installing dependencies...
23:53:39.532    Installing dependencies...
23:53:39.901    npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
23:53:40.057    up to date in 0.262s
23:53:40.073    9 packages are looking for funding
23:53:40.073      run `npm fund` for details
23:53:40.615    npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
23:53:40.836    up to date in 0.34s
23:53:40.856    9 packages are looking for funding
23:53:40.856      run `npm fund` for details
23:53:41.453    npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
23:53:41.466    Uploading build outputs...
23:53:41.648    up to date in 0.322s
23:53:41.668    9 packages are looking for funding
23:53:41.668      run `npm fund` for details
23:53:42.029    Deploying build outputs...
23:53:42.434    npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
23:53:42.676    up to date in 0.491s
23:53:42.700    9 packages are looking for funding
23:53:42.700      run `npm fund` for details
23:53:43.168    Uploading build outputs...
23:53:43.230    Uploading build outputs...
23:53:43.415    npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
23:53:43.672    up to date in 0.422s
23:53:43.695    9 packages are looking for funding
23:53:43.696      run `npm fund` for details
23:53:43.736    Deploying build outputs...
23:53:43.980    Deploying build outputs...
23:53:44.518    Uploading build outputs...
23:53:44.728    Uploading build outputs...
23:53:45.079    Done with "api/get-page-props.js"
23:53:45.116    Installing dependencies...
23:53:45.186    Deploying build outputs...
23:53:45.273    Deploying build outputs...
23:53:45.328    Done with "api/index.js"
23:53:45.807    up to date in 0.239s
23:53:45.824    9 packages are looking for funding
23:53:45.824      run `npm fund` for details
23:53:46.475    Done with "api/renderer/main.js"
23:53:46.480    Done with "api/stripe-checkout.js"
23:53:46.603    Uploading build outputs...
23:53:47.130    Deploying build outputs...
23:53:48.296    Done with "api/get-aws.js"
23:53:49.766    Uploading build outputs...
23:53:50.862    Deploying build outputs...
23:53:51.646    Done with static build
23:53:53.911    Build completed. Populating build cache...
23:53:54.995    Uploading build cache [2.39 MB]...
23:53:55.137    Build cache uploaded: 141.888ms
23:53:55.349    Done with "api/get-images.js"

frandiox commented 3 years ago

@nicholasoxford Is this your site? 😛 https://dreamland-test-frandiox.vercel.app/

Problems

Use import.meta.env.xxx instead of process.env.xxx
As mentioned earlier, you need to add dependencies to serverless/package.json. It was missing @stripe/stripe-js

For the next time, you can just check the runtime logs in Vercel (not the build, but the runtime -- Tab called "Functions"). This part was showing errors saying "did you forget to add @stripe/stripe-js to dependencies?"

@chujanen Please check if you have the same issue.

I think Vercel was adding support for pnpm, things should be simpler when that happens since we can just copy the lock file automatically.

nicholasoxford commented 3 years ago

That worked! Thank you. Makes sense to check the function tab.

I really appreciate your help 🤗

Is this the right syntax?

frandiox commented 3 years ago

Yeah, you can see Vite docs here: https://vitejs.dev/guide/env-and-mode.html#env-files

chujanen commented 3 years ago

@frandiox -- I am attempting to serve this up on my own Docker container (I was going to use Express)... so that is why I was looking for the index.html. Does my use case not fit in here?

frandiox commented 3 years ago

@chujanen It should work the same way. There's an Express.js example here. In that example you can see that anything that doesn't match /api will be rendering an HTML page. That renderPage function has a copy of the index.html inside, basically.

nicholasoxford commented 3 years ago

For env varibales, do I need to import them in the index.js? I keep getting this error, no matter where I place the import statement

I'm thinking, maybe I could load those variables in index and then export them? I have no clue

nicholasoxford commented 3 years ago

FYI I used process.env.ENV_VARIABLE instead of import.meta and everything worked.

remembers to add all these lessons to that blog post

frandiox commented 3 years ago

@nicholasoxford You need import.meta only in Vite environment. In the cloud functions environment you still need process.env.

frandiox / vitesse-ssr-template

Server returns "Not Found" #1