vikejs / vike

🔨 Flexible, lean, community-driven, dependable, fast Vite-based frontend framework.

Home Page:https://vike.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Vercel] site doesn't load after deployment

nshelia opened this issue · comments

Description

When deployed, for unknown reason build command on vercel runs twice causing multiple JS files/assets to be created ( attached deployment logs from vercel).

This results in the site crashing due to loading assets from the incorrect build.

build.log

I also can reproduce it by running vercel build && vercel deploy --prebuilt locally.

vite.config.ts

import { sentryVitePlugin } from '@sentry/vite-plugin';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import vike from 'vike/plugin';
import { fileURLToPath, URL } from 'url';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    vike(),
    sentryVitePlugin({
      org: 'greetai-inc',
      project: 'app',
    }),
  ],

  resolve: {
    alias: [
      {
        find: '@',
        replacement: fileURLToPath(new URL('./src', import.meta.url)),
      },
      {
        find: '@greet-button',
        replacement: fileURLToPath(new URL('../greet-button', import.meta.url)),
      },
    ],
  },

  build: {
    commonjsOptions: {
      esmExternals: true,
    },

    sourcemap: true,
  },
});

package.json

  "scripts": {
    "dev": "vite --port 3000",
    "build": "echo 'I will never be called because the `vercel-build` script supersedes me'",
    "vercel-build": "vite build"
  },

Website which crashes: https://greetai-platform-e55y8xyvi-greetai.vercel.app/

Note: some deployments with new commits work, redeploying doesn't work.
Note: project is inside monorepo packages/app

Screenshot 2024-03-12 at 4 02 21 PM
commented

Can you provide a minimal reproduction starting from https://github.com/brillout/vike-with-vercel? I'll re-open then; in the meantime I'm inclined to think it's a user land issue, not a Vike issue.

@brillout Thanks for quick response.

Message from Vercel support in case it helps

Hi Nika,

We really appreciate your patience, I understand your case has been open for some time. Our engineers have been comparing working deployments to the one with the 404 error.

Both of these appear to have "entry-client-routing" files within `assets/entries/`. We initially believed there could be a misconfiguration of caching however it doesn't seem like this project has a caching setup

When reviewing the error on https://greetai-platform-8pxyxwo8s-greetai.vercel.app/ we found that this file isn't present in the deployment. However it appeared in the build logs and has been generated
<script src="/assets/entries/entry-client-routing.2f2f0d6a.js" type="module" async></script>

There is a different "entry-client-routing" file mentioned in the build logs which is not referenced when loading the page
https://greetai-platform-8pxyxwo8s-greetai.vercel.app/assets/entries/entry-client-routing.132fa3c5.js


We believe that there are two "entry-client-routing" files generated on build and sometimes the wrong one is referenced. We can confirm that there are no Vercel platform issues causing this and we believe this is an issue related to the custom build configuration.

Please let us know if you have any other questions.

@brillout Reproduced it with the repo you linked. Looks like build command executes twice again, which Vercel says is root cause of the site crashing.

Website: https://vike-with-vercel-tau.vercel.app/

Here is the deployment logs

[02:55:44.576] Running build in Washington, D.C., USA (East) – iad1
[02:55:44.797] Cloning github.com/nshelia/vike-with-vercel (Branch: main, Commit: 8f5b65e)
[02:55:45.058] Cloning completed: 269.385ms
[02:55:45.155] Previous build cache not available
[02:55:45.415] Running "vercel build"
[02:55:45.918] Vercel CLI 33.5.5
[02:55:46.727] Detected `pnpm-lock.yaml` version 6 generated by pnpm 8
[02:55:46.735] Installing dependencies...
[02:55:47.450] Lockfile is up to date, resolution step is skipped
[02:55:47.486] Progress: resolved 1, reused 0, downloaded 0, added 0
[02:55:47.536] Packages: +189
[02:55:47.536] ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
[02:55:48.489] Progress: resolved 189, reused 0, downloaded 137, added 133
[02:55:49.490] Progress: resolved 189, reused 0, downloaded 188, added 188
[02:55:49.543] Progress: resolved 189, reused 0, downloaded 189, added 189, done
[02:55:49.673] .../esbuild@0.14.47/node_modules/esbuild postinstall$ node install.js
[02:55:49.685] .../esbuild@0.18.20/node_modules/esbuild postinstall$ node install.js
[02:55:49.686] .../esbuild@0.17.19/node_modules/esbuild postinstall$ node install.js
[02:55:49.770] .../esbuild@0.14.47/node_modules/esbuild postinstall: Done
[02:55:49.792] .../esbuild@0.18.20/node_modules/esbuild postinstall: Done
[02:55:49.814] .../esbuild@0.17.19/node_modules/esbuild postinstall: Done
[02:55:50.473] 
[02:55:50.474] dependencies:
[02:55:50.474] + @vercel/node 3.0.6
[02:55:50.474] + @vitejs/plugin-vue 4.3.4
[02:55:50.474] + @vue/compiler-sfc 3.3.4
[02:55:50.474] + @vue/server-renderer 3.3.4
[02:55:50.474] + typescript 5.2.2
[02:55:50.474] + vike 0.4.142
[02:55:50.474] + vite 4.4.9
[02:55:50.474] + vue 3.3.4
[02:55:50.474] 
[02:55:50.482] Done in 3.5s
[02:55:50.519] Running "pnpm run vercel-build"
[02:55:51.034] 
[02:55:51.034] > @ vercel-build /vercel/path0
[02:55:51.034] > vite build
[02:55:51.034] 
[02:55:51.521] �[36mvite v4.4.9 �[32mbuilding for production...�[36m�[39m
[02:55:51.797] transforming...
[02:55:52.942] �[32m✓�[39m 146 modules transformed.
[02:55:53.028] rendering chunks...
[02:55:53.071] computing gzip size...
[02:55:53.080] �[2mdist/client/�[22m�[32mvike.json                                                              �[39m�[1m�[2m 0.24 kB�[22m�[1m�[22m�[2m │ gzip:  0.18 kB�[22m
[02:55:53.080] �[2mdist/client/�[22m�[32m_temp_manifest.json                                                    �[39m�[1m�[2m 2.86 kB�[22m�[1m�[22m�[2m │ gzip:  0.54 kB�[22m
[02:55:53.080] �[2mdist/client/�[22m�[2massets/�[22m�[32mstatic/logo.bebe2e90.svg                                        �[39m�[1m�[2m 5.79 kB�[22m�[1m�[22m�[2m │ gzip:  1.97 kB�[22m
[02:55:53.080] �[2mdist/client/�[22m�[2massets/�[22m�[35mstatic/default.page.server.aa8aa952.css                         �[39m�[1m�[2m 0.47 kB�[22m�[1m�[22m�[2m │ gzip:  0.28 kB�[22m
[02:55:53.081] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/renderer_default.page.server.extractAssets.94b6ea98.js  �[39m�[1m�[2m 0.00 kB�[22m�[1m�[22m�[2m │ gzip:  0.02 kB�[22m
[02:55:53.081] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/pages_about_index.page.3dc13ff6.js                      �[39m�[1m�[2m 0.30 kB�[22m�[1m�[22m�[2m │ gzip:  0.24 kB�[22m
[02:55:53.081] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/pages_index_index.page.c81700fb.js                      �[39m�[1m�[2m 0.63 kB�[22m�[1m�[22m�[2m │ gzip:  0.40 kB�[22m
[02:55:53.081] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/entry-server-routing.421f720b.js                        �[39m�[1m�[2m 2.70 kB�[22m�[1m�[22m�[2m │ gzip:  1.18 kB�[22m
[02:55:53.081] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/renderer_default.page.client.642fb2e6.js                �[39m�[1m�[2m 5.23 kB�[22m�[1m�[22m�[2m │ gzip:  2.48 kB�[22m
[02:55:53.081] �[2mdist/client/�[22m�[2massets/�[22m�[36mchunks/chunk-08c5c351.js                                        �[39m�[1m�[2m28.34 kB�[22m�[1m�[22m�[2m │ gzip: 10.17 kB�[22m
[02:55:53.081] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/entry-client-routing.c7a5b77b.js                        �[39m�[1m�[2m39.02 kB�[22m�[1m�[22m�[2m │ gzip: 12.63 kB�[22m
[02:55:53.082] �[2mdist/client/�[22m�[2massets/�[22m�[36mchunks/chunk-d680a90b.js                                        �[39m�[1m�[2m48.91 kB�[22m�[1m�[22m�[2m │ gzip: 19.94 kB�[22m
[02:55:53.097] �[36mvite v4.4.9 �[32mbuilding SSR bundle for production...�[36m�[39m
[02:55:53.110] transforming...
[02:55:53.161] �[32m✓�[39m 13 modules transformed.
[02:55:53.173] rendering chunks...
[02:55:53.180] �[2mdist/server/�[22m�[32mpackage.json                              �[39m�[1m�[2m0.02 kB�[22m�[1m�[22m
[02:55:53.180] �[2mdist/server/�[22m�[32mimportBuild.cjs                           �[39m�[1m�[2m0.46 kB�[22m�[1m�[22m
[02:55:53.180] �[2mdist/server/�[22m�[36mchunks/chunk-cc2b3d55.js                  �[39m�[1m�[2m0.19 kB�[22m�[1m�[22m
[02:55:53.180] �[2mdist/server/�[22m�[36mimportBuild.mjs                           �[39m�[1m�[2m0.20 kB�[22m�[1m�[22m
[02:55:53.180] �[2mdist/server/�[22m�[36mentries/pages_about_index-page.mjs        �[39m�[1m�[2m0.69 kB�[22m�[1m�[22m
[02:55:53.180] �[2mdist/server/�[22m�[36mentries/pages_index_index-page.mjs        �[39m�[1m�[2m1.79 kB�[22m�[1m�[22m
[02:55:53.180] �[2mdist/server/�[22m�[36mpageFiles.mjs                             �[39m�[1m�[2m1.79 kB�[22m�[1m�[22m
[02:55:53.181] �[2mdist/server/�[22m�[36mentries/renderer_default-page-server.mjs  �[39m�[1m�[2m2.72 kB�[22m�[1m�[22m
[02:55:53.181] �[32m✓ built in 82ms�[39m
[02:55:53.181] �[32m✓ built in 1.66s�[39m
[02:55:53.226] Detected `pnpm-lock.yaml` version 6 generated by pnpm 8
[02:55:53.226] Running "pnpm run vercel-build"
[02:55:53.742] 
[02:55:53.742] > @ vercel-build /vercel/path0
[02:55:53.742] > vite build
[02:55:53.742] 
[02:55:54.237] �[36mvite v4.4.9 �[32mbuilding for production...�[36m�[39m
[02:55:54.514] transforming...
[02:55:55.702] �[32m✓�[39m 146 modules transformed.
[02:55:55.793] rendering chunks...
[02:55:55.832] computing gzip size...
[02:55:55.838] �[2mdist/client/�[22m�[32mvike.json                                                              �[39m�[1m�[2m 0.24 kB�[22m�[1m�[22m�[2m │ gzip:  0.18 kB�[22m
[02:55:55.839] �[2mdist/client/�[22m�[32m_temp_manifest.json                                                    �[39m�[1m�[2m 2.86 kB�[22m�[1m�[22m�[2m │ gzip:  0.54 kB�[22m
[02:55:55.839] �[2mdist/client/�[22m�[2massets/�[22m�[32mstatic/logo.bebe2e90.svg                                        �[39m�[1m�[2m 5.79 kB�[22m�[1m�[22m�[2m │ gzip:  1.97 kB�[22m
[02:55:55.839] �[2mdist/client/�[22m�[2massets/�[22m�[35mstatic/default.page.server.aa8aa952.css                         �[39m�[1m�[2m 0.47 kB�[22m�[1m�[22m�[2m │ gzip:  0.28 kB�[22m
[02:55:55.839] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/renderer_default.page.server.extractAssets.94b6ea98.js  �[39m�[1m�[2m 0.00 kB�[22m�[1m�[22m�[2m │ gzip:  0.02 kB�[22m
[02:55:55.839] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/pages_about_index.page.3dc13ff6.js                      �[39m�[1m�[2m 0.30 kB�[22m�[1m�[22m�[2m │ gzip:  0.24 kB�[22m
[02:55:55.839] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/pages_index_index.page.c81700fb.js                      �[39m�[1m�[2m 0.63 kB�[22m�[1m�[22m�[2m │ gzip:  0.40 kB�[22m
[02:55:55.839] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/entry-server-routing.421f720b.js                        �[39m�[1m�[2m 2.70 kB�[22m�[1m�[22m�[2m │ gzip:  1.18 kB�[22m
[02:55:55.840] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/renderer_default.page.client.642fb2e6.js                �[39m�[1m�[2m 5.23 kB�[22m�[1m�[22m�[2m │ gzip:  2.48 kB�[22m
[02:55:55.840] �[2mdist/client/�[22m�[2massets/�[22m�[36mchunks/chunk-08c5c351.js                                        �[39m�[1m�[2m28.34 kB�[22m�[1m�[22m�[2m │ gzip: 10.17 kB�[22m
[02:55:55.840] �[2mdist/client/�[22m�[2massets/�[22m�[36mentries/entry-client-routing.c7a5b77b.js                        �[39m�[1m�[2m39.02 kB�[22m�[1m�[22m�[2m │ gzip: 12.63 kB�[22m
[02:55:55.840] �[2mdist/client/�[22m�[2massets/�[22m�[36mchunks/chunk-d680a90b.js                                        �[39m�[1m�[2m48.91 kB�[22m�[1m�[22m�[2m │ gzip: 19.94 kB�[22m
[02:55:55.856] �[36mvite v4.4.9 �[32mbuilding SSR bundle for production...�[36m�[39m
[02:55:55.870] transforming...
[02:55:55.923] �[32m✓�[39m 13 modules transformed.
[02:55:55.936] rendering chunks...
[02:55:55.943] �[2mdist/server/�[22m�[32mpackage.json                              �[39m�[1m�[2m0.02 kB�[22m�[1m�[22m
[02:55:55.943] �[2mdist/server/�[22m�[32mimportBuild.cjs                           �[39m�[1m�[2m0.46 kB�[22m�[1m�[22m
[02:55:55.943] �[2mdist/server/�[22m�[36mchunks/chunk-cc2b3d55.js                  �[39m�[1m�[2m0.19 kB�[22m�[1m�[22m
[02:55:55.943] �[2mdist/server/�[22m�[36mimportBuild.mjs                           �[39m�[1m�[2m0.20 kB�[22m�[1m�[22m
[02:55:55.943] �[2mdist/server/�[22m�[36mentries/pages_about_index-page.mjs        �[39m�[1m�[2m0.69 kB�[22m�[1m�[22m
[02:55:55.943] �[2mdist/server/�[22m�[36mentries/pages_index_index-page.mjs        �[39m�[1m�[2m1.79 kB�[22m�[1m�[22m
[02:55:55.943] �[2mdist/server/�[22m�[36mpageFiles.mjs                             �[39m�[1m�[2m1.79 kB�[22m�[1m�[22m
[02:55:55.943] �[2mdist/server/�[22m�[36mentries/renderer_default-page-server.mjs  �[39m�[1m�[2m2.72 kB�[22m�[1m�[22m
[02:55:55.943] �[32m✓ built in 86ms�[39m
[02:55:55.943] �[32m✓ built in 1.71s�[39m
[02:55:57.543] Build Completed in /vercel/output [11s]
[02:55:57.681] Deploying outputs...
[02:56:05.930] 
[02:56:06.178] Deployment completed
[02:56:10.536] Uploading build cache [22.02 MB]...
[02:56:11.834] Build cache uploaded: 1.298s
commented

I cannot reproduce any issue: it successfully deploys.

I'm also seeing that the vercel-build script is run twice, but that's a Vercel question which doesn't seem related to Vike. Maybe you can ask Vercel support why Vercel runs it twice. Let me know what they reply, I'm curious.

From conversation with support

We can see "vite build" appearing twice in build logs as described. When you said it "happens randomly" did you mean that it randomly triggers twice or randomly crashes? The reason we're asking is because every build we have checked so far seems to include "vite build" twice.
Do you know if this happens when building locally? For example:
vercel build && vercel deploy --prebuilt
Further details of the command above are available in our Vercel CLI documentation.

We believe that there are two "entry-client-routing" files generated on build and sometimes the wrong one is referenced. We can confirm that there are no Vercel platform issues causing this and we believe this is an issue related to the custom build configuration.

commented

So, yea, the question very much seems to be why is package.json#vercel-build being trigged twice by Vercel?

Maybe there is an alternative other than using package.json#vercel-build. Last time I tried to use package.json#build it didn't work, but maybe there is (nowadays) a way to make it work.

Keep us updated, it would be nice to update the Vike on Vercel example.

Reverting back to standard build command worked! Tested with 2 projects. Thanks for help.

commented

brillout/vike-with-vercel#2 did the trick. The build is now only executed once.

commented

Thanks for circling back on this. Btw. in case that's an option for your company, we're looking for sponsors.