Skip to content

[🐞] server build should detect when client build is missing or out of date #7479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
siddoinghisjob opened this issue Apr 3, 2025 · 8 comments · May be fixed by #7517
Open

[🐞] server build should detect when client build is missing or out of date #7479

siddoinghisjob opened this issue Apr 3, 2025 · 8 comments · May be fixed by #7517
Assignees
@JerryWu1234
Labels
COMMUNITY: PR is welcomed We think it's a good feature to have but would love for the community to help with the PR for it COMP: DX Developer Experience related issue TYPE: bug Something isn't working

Comments

@siddoinghisjob
Copy link

siddoinghisjob commented Apr 3, 2025 •
edited by wmertens
Loading

Which component is affected?

Qwik Runtime

Describe the bug

I have created route blogs/[id]/ and generating static pages via build.server command. The code looks the following

import { component$ } from "@builder.io/qwik";
import {
  Link,
  type StaticGenerateHandler,
  useLocation,
  type DocumentHead,
} from "@builder.io/qwik-city";
import Blog from "~/components/layout/utils/blog";
import { PageTransition } from "~/components/layout/utils/Pagetransition";
import data from "../../../../data/blog.json";

const perpage = 2;

export default component$(() => {
  const location = useLocation();
  const pagenum = Number(location.params.id);

  const totalPages = Math.ceil(data.blogs.length / 2);
  const nextpage = pagenum + 1;
  const prevpage = pagenum - 1;

  // Handle invalid page numbers
  if (isNaN(pagenum) || pagenum < 1 || data.blogs.length === 0) {
    return <div>Page not found.</div>;
  }
  return (
    <PageTransition>
      <main class="flex flex-col gap-8 p-4 px-5 md:p-8">
        <ul class="flex flex-col gap-6">
          {data.blogs
            .slice(
              perpage * (Number(location.params.id) - 1),
              Number(location.params.id) * perpage,
            )
            .map((blogs, key) => {
              return <Blog key={key} blog={blogs} />;
            })}
        </ul>

        {totalPages !== 1 && (
          <nav
            class="bg-card text-card-foreground mt-4 flex items-center justify-between rounded-lg p-4 shadow-md md:p-6"
            aria-label="Blog post pagination"
          >
            <Link
              href={"/blogs/" + prevpage}
              class={
                pagenum === 1
                  ? "text-muted-foreground cursor-not-allowed opacity-50"
                  : "text-primary transition-colors duration-200 hover:underline"
              }
              aria-disabled={pagenum === 1 ? "true" : "false"}
            >
              ← Previous Page
            </Link>

            <span class="text-muted-foreground text-sm">
              Page {pagenum} of {totalPages}
            </span>
            <Link
              href={"/blogs/" + nextpage}
              class={
                pagenum == totalPages
                  ? "text-muted-foreground cursor-not-allowed opacity-50"
                  : "text-primary transition-colors duration-200 hover:underline"
              }
              aria-disabled={pagenum === totalPages ? "true" : "false"}
            >
              Next Page →
            </Link>
          </nav>
        )}

        <div class="bg-card mt-4 rounded p-4 shadow md:p-6">
          <p class="font-main text-center">
            Looking for a specific topic? Feel free to
            <Link href="/contact" class="text-secondary ml-1 hover:underline">
              request a blog post
            </Link>
            .
          </p>
        </div>
      </main>
    </PageTransition>
  );
});

export const onStaticGenerate: StaticGenerateHandler = () => {
  const totalPages = Math.ceil(data.blogs.length/2);
  const params = [];
  for (let i = 1; i <= totalPages; ++i) {
    params.push(i.toString());
  }
  return {
    params: params.map((id) => {
      return { id };
    }),
  };
};

export const head: DocumentHead = {
  title: "Blog | Soumya Deep Sarkar",
  meta: [
    {
      name: "description",
      content:
        "Read Soumya Deep Sarkar's blog posts about software development, programming languages, and web technologies.",
    },
  ],
};

The error -

npm run build.server

> build.server
> vite build -c adapters/static/vite.config.ts

vite v5.3.5 building SSR bundle for production...
✓ 29 modules transformed.
server/assets/BPSbV54u-style.css  24.62 kB
server/@qwik-city-plan.js         21.61 kB
server/entry.ssr.js               47.36 kB
server/q-CU9IdrCG.js              81.29 kB
✓ built in 2.56s

Starting Qwik City SSG...
dist\index.html
dist\project\index.html
Cannot resolve symbol s_vSR6gZ0pO6g in {
  Ysfvd0zsHZc: [ 's_Ysfvd0zsHZc', 'q-Cy1xxEh3.js' ],
  hL5QSuN0LpE: [ 's_hL5QSuN0LpE', 'q-FbtZd7LD.js' ],
  '26Zk9LevwR4': [ 's_26Zk9LevwR4', 'q-CQSbs2jQ.js' ],
  '0vphQYqOdZI': [ 's_0vphQYqOdZI', 'q-IYnHh6kA.js' ],
  '1raneLGffO8': [ 's_1raneLGffO8', 'q-D_gpHSjt.js' ],
  B0lqk5IDDy4: [ 's_B0lqk5IDDy4', 'q-CyBgZS5n.js' ],
  COPdD8DaDn8: [ 's_COPdD8DaDn8', 'q-NEgUj0Dc.js' ],
  MiPVFWJLcMo: [ 's_MiPVFWJLcMo', 'q-BVxAaz_N.js' ],
  Q7HCOpRSvu8: [ 's_Q7HCOpRSvu8', 'q-CnBBHdk2.js' ],
  ScE8eseirUA: [ 's_ScE8eseirUA', 'q-BSjXgHJ9.js' ],
  VKFlAWJuVm8: [ 's_VKFlAWJuVm8', 'q-Ddjey8dW.js' ],
  chva4H0XOCk: [ 's_chva4H0XOCk', 'q-BuYp6rhB.js' ],
  kW8dKKguQ7s: [ 's_kW8dKKguQ7s', 'q-GHUXQDcP.js' ],
  mz2FTw8I8T0: [ 's_mz2FTw8I8T0', 'q-CRqYpJCj.js' ],
  p1yCGpFL1xE: [ 's_p1yCGpFL1xE', 'q-B0pQC-Kp.js' ],
  pWsmcogutG8: [ 's_pWsmcogutG8', 'q-D5Gf1mkn.js' ],
  rFiWaZhGuxk: [ 's_rFiWaZhGuxk', 'q-Ubrg8kJ7.js' ],
  tntnak2DhJ8: [ 's_tntnak2DhJ8', 'q-BH3BnGNE.js' ],
  uihuJQ7TJfM: [ 's_uihuJQ7TJfM', 'q-D0t1cVj1.js' ],
  y0ps5o68kYo: [ 's_y0ps5o68kYo', 'q-DuypGC_F.js' ],
  K4gvalEGCME: [ 's_K4gvalEGCME', 'q-DH5Jtz0V.js' ],
  '9KRx0IOCHt8': [ 's_9KRx0IOCHt8', 'q-BRBr7aun.js' ],
  A5SCimyrjAE: [ 's_A5SCimyrjAE', 'q-B1c5ccLb.js' ],
  N26RLdG0oBg: [ 's_N26RLdG0oBg', 'q-oaw8BCnX.js' ],
  WfTOxT4IrdA: [ 's_WfTOxT4IrdA', 'q-BIXne6L1.js' ],
  FdQ8zERN4uM: [ 's_FdQ8zERN4uM', 'q-DO3UoLed.js' ],
  Fgfngs6JDFI: [ 's_Fgfngs6JDFI', 'q-Zyx9NCMx.js' ],
  PmWjL2RrvZM: [ 's_PmWjL2RrvZM', 'q-D5olaLIs.js' ],
  aww2BzpANGM: [ 's_aww2BzpANGM', 'q-BWX-QvSe.js' ],
  qGVD1Sz413o: [ 's_qGVD1Sz413o', 'q-CI-XCShv.js' ],
  xe8duyQ5aaU: [ 's_xe8duyQ5aaU', 'q-BwwmDE0Q.js' ],
  zPJUEsxZLIA: [ 's_zPJUEsxZLIA', 'q-D74tKJFL.js' ],
  zpHcJzYZ88E: [ 's_zpHcJzYZ88E', 'q-vEGh4dtG.js' ]
} undefined
dist\blogs\content\typescript-best-practices\index.html
worker error Error: Code(31) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L39
    at an (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:1:586)
    at ln (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:1:499)
    at L (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:1:852)
    at Wn (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:31653)
    at Object.$serialize$ (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:5:1519)
    at jc (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:5:7146)
    at file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:31065
    at Array.map (<anonymous>)
    at Ec (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:30848)
    at lc (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:27072)
Cannot resolve symbol s_vSR6gZ0pO6g in {
  Ysfvd0zsHZc: [ 's_Ysfvd0zsHZc', 'q-Cy1xxEh3.js' ],
  hL5QSuN0LpE: [ 's_hL5QSuN0LpE', 'q-FbtZd7LD.js' ],
  '26Zk9LevwR4': [ 's_26Zk9LevwR4', 'q-CQSbs2jQ.js' ],
  '0vphQYqOdZI': [ 's_0vphQYqOdZI', 'q-IYnHh6kA.js' ],
  '1raneLGffO8': [ 's_1raneLGffO8', 'q-D_gpHSjt.js' ],
  B0lqk5IDDy4: [ 's_B0lqk5IDDy4', 'q-CyBgZS5n.js' ],
  COPdD8DaDn8: [ 's_COPdD8DaDn8', 'q-NEgUj0Dc.js' ],
  MiPVFWJLcMo: [ 's_MiPVFWJLcMo', 'q-BVxAaz_N.js' ],
  Q7HCOpRSvu8: [ 's_Q7HCOpRSvu8', 'q-CnBBHdk2.js' ],
  ScE8eseirUA: [ 's_ScE8eseirUA', 'q-BSjXgHJ9.js' ],
  VKFlAWJuVm8: [ 's_VKFlAWJuVm8', 'q-Ddjey8dW.js' ],
  chva4H0XOCk: [ 's_chva4H0XOCk', 'q-BuYp6rhB.js' ],
  kW8dKKguQ7s: [ 's_kW8dKKguQ7s', 'q-GHUXQDcP.js' ],
  mz2FTw8I8T0: [ 's_mz2FTw8I8T0', 'q-CRqYpJCj.js' ],
  p1yCGpFL1xE: [ 's_p1yCGpFL1xE', 'q-B0pQC-Kp.js' ],
  pWsmcogutG8: [ 's_pWsmcogutG8', 'q-D5Gf1mkn.js' ],
  rFiWaZhGuxk: [ 's_rFiWaZhGuxk', 'q-Ubrg8kJ7.js' ],
  tntnak2DhJ8: [ 's_tntnak2DhJ8', 'q-BH3BnGNE.js' ],
  uihuJQ7TJfM: [ 's_uihuJQ7TJfM', 'q-D0t1cVj1.js' ],
  y0ps5o68kYo: [ 's_y0ps5o68kYo', 'q-DuypGC_F.js' ],
  K4gvalEGCME: [ 's_K4gvalEGCME', 'q-DH5Jtz0V.js' ],
  '9KRx0IOCHt8': [ 's_9KRx0IOCHt8', 'q-BRBr7aun.js' ],
  A5SCimyrjAE: [ 's_A5SCimyrjAE', 'q-B1c5ccLb.js' ],
  N26RLdG0oBg: [ 's_N26RLdG0oBg', 'q-oaw8BCnX.js' ],
  WfTOxT4IrdA: [ 's_WfTOxT4IrdA', 'q-BIXne6L1.js' ],
  FdQ8zERN4uM: [ 's_FdQ8zERN4uM', 'q-DO3UoLed.js' ],
  Fgfngs6JDFI: [ 's_Fgfngs6JDFI', 'q-Zyx9NCMx.js' ],
  PmWjL2RrvZM: [ 's_PmWjL2RrvZM', 'q-D5olaLIs.js' ],
  aww2BzpANGM: [ 's_aww2BzpANGM', 'q-BWX-QvSe.js' ],
  qGVD1Sz413o: [ 's_qGVD1Sz413o', 'q-CI-XCShv.js' ],
  xe8duyQ5aaU: [ 's_xe8duyQ5aaU', 'q-BwwmDE0Q.js' ],
  zPJUEsxZLIA: [ 's_zPJUEsxZLIA', 'q-D74tKJFL.js' ],
  zpHcJzYZ88E: [ 's_zpHcJzYZ88E', 'q-vEGh4dtG.js' ]
} undefined
worker error Error: Code(31) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L39
    at an (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:1:586)
    at ln (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:1:499)
    at L (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:1:852)
    at Wn (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:31653)
    at Object.$serialize$ (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:5:1519)
    at jc (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:5:7146)
    at file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:31065
    at Array.map (<anonymous>)
    at Ec (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:30848)
    at lc (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:27072)
Cannot resolve symbol s_vSR6gZ0pO6g in {
  Ysfvd0zsHZc: [ 's_Ysfvd0zsHZc', 'q-Cy1xxEh3.js' ],
  hL5QSuN0LpE: [ 's_hL5QSuN0LpE', 'q-FbtZd7LD.js' ],
  '26Zk9LevwR4': [ 's_26Zk9LevwR4', 'q-CQSbs2jQ.js' ],
  '0vphQYqOdZI': [ 's_0vphQYqOdZI', 'q-IYnHh6kA.js' ],
  '1raneLGffO8': [ 's_1raneLGffO8', 'q-D_gpHSjt.js' ],
  B0lqk5IDDy4: [ 's_B0lqk5IDDy4', 'q-CyBgZS5n.js' ],
  COPdD8DaDn8: [ 's_COPdD8DaDn8', 'q-NEgUj0Dc.js' ],
  MiPVFWJLcMo: [ 's_MiPVFWJLcMo', 'q-BVxAaz_N.js' ],
  Q7HCOpRSvu8: [ 's_Q7HCOpRSvu8', 'q-CnBBHdk2.js' ],
  ScE8eseirUA: [ 's_ScE8eseirUA', 'q-BSjXgHJ9.js' ],
  VKFlAWJuVm8: [ 's_VKFlAWJuVm8', 'q-Ddjey8dW.js' ],
  chva4H0XOCk: [ 's_chva4H0XOCk', 'q-BuYp6rhB.js' ],
  kW8dKKguQ7s: [ 's_kW8dKKguQ7s', 'q-GHUXQDcP.js' ],
  mz2FTw8I8T0: [ 's_mz2FTw8I8T0', 'q-CRqYpJCj.js' ],
  p1yCGpFL1xE: [ 's_p1yCGpFL1xE', 'q-B0pQC-Kp.js' ],
  pWsmcogutG8: [ 's_pWsmcogutG8', 'q-D5Gf1mkn.js' ],
  rFiWaZhGuxk: [ 's_rFiWaZhGuxk', 'q-Ubrg8kJ7.js' ],
  tntnak2DhJ8: [ 's_tntnak2DhJ8', 'q-BH3BnGNE.js' ],
  uihuJQ7TJfM: [ 's_uihuJQ7TJfM', 'q-D0t1cVj1.js' ],
  y0ps5o68kYo: [ 's_y0ps5o68kYo', 'q-DuypGC_F.js' ],
  K4gvalEGCME: [ 's_K4gvalEGCME', 'q-DH5Jtz0V.js' ],
  '9KRx0IOCHt8': [ 's_9KRx0IOCHt8', 'q-BRBr7aun.js' ],
  A5SCimyrjAE: [ 's_A5SCimyrjAE', 'q-B1c5ccLb.js' ],
  N26RLdG0oBg: [ 's_N26RLdG0oBg', 'q-oaw8BCnX.js' ],
  WfTOxT4IrdA: [ 's_WfTOxT4IrdA', 'q-BIXne6L1.js' ],
  FdQ8zERN4uM: [ 's_FdQ8zERN4uM', 'q-DO3UoLed.js' ],
  Fgfngs6JDFI: [ 's_Fgfngs6JDFI', 'q-Zyx9NCMx.js' ],
  PmWjL2RrvZM: [ 's_PmWjL2RrvZM', 'q-D5olaLIs.js' ],
  aww2BzpANGM: [ 's_aww2BzpANGM', 'q-BWX-QvSe.js' ],
  qGVD1Sz413o: [ 's_qGVD1Sz413o', 'q-CI-XCShv.js' ],
  xe8duyQ5aaU: [ 's_xe8duyQ5aaU', 'q-BwwmDE0Q.js' ],
  zPJUEsxZLIA: [ 's_zPJUEsxZLIA', 'q-D74tKJFL.js' ],   
  zpHcJzYZ88E: [ 's_zpHcJzYZ88E', 'q-vEGh4dtG.js' ]    
} undefined
worker error Error: Code(31) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L39
    at an (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:1:586)
    at ln (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:1:499)
    at L (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:1:852)
    at Wn (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:31653)
    at Object.$serialize$ (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:5:1519)
    at jc (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:5:7146)
    at file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:31065
    at Array.map (<anonymous>)
    at Ec (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:30848)
    at lc (file:///C:/Users/soumy/projects/Projects/qwik/portfolio/server/q-CU9IdrCG.js:4:27072)

Reproduction

https://github.com/siddoinghisjob/blog-code

Steps to reproduce

npm run build.server

System Info

Windows 11
"qwik": "^1.12.1", 
"qwik-city": "^1.12.1",
"vite": "5.3.5",
Node.js v21.5.0

Additional Information

No response
@siddoinghisjob siddoinghisjob added STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working labels Apr 3, 2025
@JerryWu1234 JerryWu1234 self-assigned this Apr 9, 2025
@JerryWu1234
Copy link
Contributor

https://qwik.dev/docs/deployments/static/#static-site-adapter

there is wrong in this park

@JerryWu1234
Copy link
Contributor

@siddoinghisjob you have to run pnpm run build first before running pnpm run build.server

@JerryWu1234 JerryWu1234 mentioned this issue Apr 9, 2025
Closed
5 tasks
@JerryWu1234 JerryWu1234 moved this from Backlog to In progress in Qwik Development Apr 10, 2025
@siddoinghisjob
Copy link
Author

I ran run npm build and somehow that created the neccessary files without throwing any error.

@github-project-automation github-project-automation bot moved this from In progress to Done in Qwik Development Apr 13, 2025
@siddoinghisjob
Copy link
Author

@siddoinghisjob you have to run pnpm run build first before running pnpm run build.server

Can you pls tell me why?

@JerryWu1234
Copy link
Contributor

@siddoinghisjob As a matter of fact, it needs a manifest file when you run build.serve.
I think it would be better if qwik can execute pnpm run build without disk directory after user runs pnpm run qwik add.
However, it's just my idea. Anyway,I'll discuss this with other guy

@siddoinghisjob
Copy link
Author

got it buddy thanks

@JerryWu1234 JerryWu1234 reopened this Apr 14, 2025
@JerryWu1234
Copy link
Contributor

I will close it after we improve DX

@JerryWu1234
Copy link
Contributor

JerryWu1234 commented Apr 14, 2025 •
edited by wmertens
Loading

here is latest update.

first: add a new command qwik check-client.

second: look at the timestamp of /q-manifest.json and then check if any file under src/ is more recent. If the manifest is missing or there are newer files, run the client build.

third: check whether the disk folder exists

@JerryWu1234 JerryWu1234 moved this from Done to Upcoming in Qwik Development Apr 15, 2025
@JerryWu1234 JerryWu1234 linked a pull request Apr 15, 2025 that will close this issue
Open
5 tasks
@wmertens wmertens added COMP: DX Developer Experience related issue COMMUNITY: PR is welcomed We think it's a good feature to have but would love for the community to help with the PR for it and removed STATUS-1: needs triage New issue which needs to be triaged labels Apr 17, 2025
@wmertens wmertens changed the title [🐞]Static Generator is throwing error [🐞] server build should detect when client build is missing or out of date Apr 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@JerryWu1234 JerryWu1234

Labels
COMMUNITY: PR is welcomed We think it's a good feature to have but would love for the community to help with the PR for it COMP: DX Developer Experience related issue TYPE: bug Something isn't working
Projects
Qwik Development
Status: Upcoming
Milestone
No milestone
3 participants
@wmertens @JerryWu1234 @siddoinghisjob