I’m trying to upgrade a Hilla based app from 25.1.11 to 25.2.7. In development mode the app runs fine but the production build shows a blank page. There are no errors in the build and the package.json is updated properly. I tried the same upgrade when 25.2 was released and all subsequent updates but the same issue remains and 25.3.0-beta1 has the same issue. I have tried to create a minimal reproduction but have been unable to reproduce. Any ideas where to start looking?
Can you reproduce this using e.g. GitHub - vaadin/skeleton-starter-hilla-react · GitHub?
Oh, seems I misread or skipped the “I have tried to…” part :)
One way would be to try to find the exact change that causes the problem… maybe by testing 25.2.0 alpha versions if the last 25.1 version works and 25.2.0 fails.
Otherwise… checking what ends up in the browser, the browser console log (set to debug level) or even what the browser loads or does not load…
The browser console log is clean and the index.html imports a lot of scripts but nothing is rendered. I will try the suggestion on rolling back to the alpha versions. 25.2.0 wasn’t working so I will roll back to the betas and alphas to see where it starts failing.
Are you using the file based router or not? I seem to remember somebody mentioning a potential issue when not using it
Yes we are using the file based router. My hunch is that this issue has something to do with the vite upgrade. Is there a way to downgrade vite?
25.2.0-alpha2 works as expected and it uses vite 7.3.1. 25.2.0-alpha3 doesn’t work and it uses vite 8.0.10. I noticed in another non vaadin project when configuring vite 8 code splitting that I would get a blank page depending on how aggressive the code splitting was. I also see a difference in the rendered page where there are a lot more imports between the different vite builds.
I created a custom build of the flow server where I rolled back the Vite upgrade. After that the production build worked as expected showing the app. So there is definitely something happening with the Vite 8 build that causes the issue with the blank page.
Maybe you can compare the output from the two and see what the relevant difference is? Also Vite is currently at 8.2.2 which has several bugs fixed since 8.0.10 so I would compare to the latest 25.3 beta
I have now tested the latest beta and the same problem with white page exists. When rolling back vite it works as expected.
The difference in output:
files vite 8.2.2
├── index.html
├── index.html.br
└── VAADIN
└── build
├── _resetId_-BLHhW5w9.js
├── _resetId_-BLHhW5w9.js.br
├── @index-BR9-iLe7.js
├── @index-BR9-iLe7.js.br
├── @index-BygW-Jp2.js
├── @index-BygW-Jp2.js.br
├── @index-C5p4rLF-.js
├── @index-C5p4rLF-.js.br
├── @index-CB5f3mqw.js
├── @index-CB5f3mqw.js.br
├── @index-CTF2G7PL.js
├── @index-CTF2G7PL.js.br
├── @index-DCbArdlX.js
├── @index-DCbArdlX.js.br
├── @index-DgyjTzag.js
├── @index-DgyjTzag.js.br
├── @index-DkO7aGRH.js
├── @index-DkO7aGRH.js.br
├── @index-DRlMSNg7.js
├── @index-DRlMSNg7.js.br
├── @index-Dw33K1-X.js
├── @index-Dw33K1-X.js.br
├── @index-ky-tEzC2.js
├── @index-ky-tEzC2.js.br
├── @index-majtW90O.js
├── @index-majtW90O.js.br
├── @index-syfIOPmx.js
├── @index-syfIOPmx.js.br
├── @index-UJS9aBHd.js
├── @index-UJS9aBHd.js.br
├── acribon-logo-CvJ3oV8A.svg
├── acribon-logo-CvJ3oV8A.svg.br
├── acribon-logo-dark-Ds_JYlLw.svg
├── acribon-logo-dark-Ds_JYlLw.svg.br
├── Amex-o_mIdQzM.png
├── ApplicationConnection-DXH2cnf_.js
├── ApplicationConnection-DXH2cnf_.js.br
├── auth-BNhn-Jqb.js
├── auth-BNhn-Jqb.js.br
├── browser-DmDswoXc.js
├── browser-DmDswoXc.js.br
├── Candid-Black-nvTlsyho.otf
├── Candid-Black-nvTlsyho.otf.br
├── Candid-BlackItalic-BjeJy1tI.otf
├── Candid-BlackItalic-BjeJy1tI.otf.br
├── Candid-Bold-4UZfkMp2.otf
├── Candid-Bold-4UZfkMp2.otf.br
├── Candid-BoldItalic-DROQxX6k.otf
├── Candid-BoldItalic-DROQxX6k.otf.br
├── Candid-ExtraBold-DCTLgswe.otf
├── Candid-ExtraBold-DCTLgswe.otf.br
├── Candid-ExtraBoldItalic-BIVH-Gfe.otf
├── Candid-ExtraBoldItalic-BIVH-Gfe.otf.br
├── Candid-Light-D1lWYt7f.otf
├── Candid-Light-D1lWYt7f.otf.br
├── Candid-LightItalic-Bv71LITe.otf
├── Candid-LightItalic-Bv71LITe.otf.br
├── Candid-Medium-BkoNhBd_.otf
├── Candid-Medium-BkoNhBd_.otf.br
├── Candid-MediumItalic-C3-Y6S17.otf
├── Candid-MediumItalic-C3-Y6S17.otf.br
├── Candid-Regular-BdAeDLam.otf
├── Candid-Regular-BdAeDLam.otf.br
├── Candid-RegularItalic-BC8Zj4jG.otf
├── Candid-RegularItalic-BC8Zj4jG.otf.br
├── Candid-SemiBold-CLWI8zDN.otf
├── Candid-SemiBold-CLWI8zDN.otf.br
├── Candid-SemiBoldItalic-BCawTp6i.otf
├── Candid-SemiBoldItalic-BCawTp6i.otf.br
├── Candid-Thin-Bkiy2EZl.otf
├── Candid-Thin-Bkiy2EZl.otf.br
├── Candid-ThinItalic-CjfARdbq.otf
├── Candid-ThinItalic-CjfARdbq.otf.br
├── Candid-UltraLight-CNgB0e4N.otf
├── Candid-UltraLight-CNgB0e4N.otf.br
├── Candid-UltraLightItalic-DiX-2uUB.otf
├── Candid-UltraLightItalic-DiX-2uUB.otf.br
├── changePassword-BkkFMG5e.js
├── changePassword-BkkFMG5e.js.br
├── classnames-BnhHqKff.js
├── classnames-BnhHqKff.js.br
├── client-BSgjoOxt.js
├── client-BSgjoOxt.js.br
├── CompanyTelia-_nRXf7-A.svg
├── CompanyTelia-_nRXf7-A.svg.br
├── CompanyTopcom-BplCzXMp.png
├── components-BBHS8qYV.css
├── components-BBHS8qYV.css.br
├── components-CJCiXHEq.js
├── components-CJCiXHEq.js.br
├── components-CRhjDndC.js
├── components-CRhjDndC.js.br
├── defaultContactImage-Cgdz8AGK.jpg
├── demo-DlrBFiZa.js
├── demo-DlrBFiZa.js.br
├── dinersClub-DRSWgrMa.png
├── directive-DjBQiPm1.js
├── directive-DjBQiPm1.js.br
├── discover-CJXkcKf3.jpeg
├── fa-brands-400-Co6qPm93.woff2
├── fa-duotone-900-Bxa1mK0y.woff2
├── fa-light-300-CsIbtatK.woff2
├── fa-regular-400-Dzw9S-Dd.woff2
├── fa-solid-900-Ssz3Nst8.woff2
├── fa-thin-100-BRZmsfLa.woff2
├── FlowBootstrap-JyuvG7xe.js
├── FlowBootstrap-JyuvG7xe.js.br
├── FlowClient-0nFV3nej.js
├── FlowClient-0nFV3nej.js.br
├── generated-flow-imports-h7Y__cwl.js
├── generated-flow-imports-h7Y__cwl.js.br
├── indexhtml-Bx1tVvKf.js
├── indexhtml-Bx1tVvKf.js.br
├── indexhtml-z7r25Frt.css
├── indexhtml-z7r25Frt.css.br
├── jcb-DQN-in8U.jpeg
├── jsx-runtime-Ciaf_P-h.js
├── jsx-runtime-Ciaf_P-h.js.br
├── LekabFavicon-Dy72aKaY.png
├── lib-Dkl2lMZT.js
├── lib-Dkl2lMZT.js.br
├── markdown-helpers-BrhHzD0Z.js
├── markdown-helpers-BrhHzD0Z.js.br
├── mastercard-l04n8YAj.png
├── new-BREYnByq.js
├── new-BREYnByq.js.br
├── new-BrzEbsmG.js
├── new-BrzEbsmG.js.br
├── new-CmsOdqFz.js
├── new-CmsOdqFz.js.br
├── new-DK7JQh0e.js
├── new-DK7JQh0e.js.br
├── new-uplsLLd3.js
├── new-uplsLLd3.js.br
├── Notification-BYXUwzCq.js
├── Notification-BYXUwzCq.js.br
├── OutreachForm-DlqGN5Mv.js
├── OutreachForm-DlqGN5Mv.js.br
├── outreachRunColumns-BRNABt-H.js
├── outreachRunColumns-BRNABt-H.js.br
├── page-B9pPFaTi.js
├── page-B9pPFaTi.js.br
├── preload-helper-vA8C0XsV.js
├── preload-helper-vA8C0XsV.js.br
├── Profiler-Kt7xtjS_.js
├── Profiler-Kt7xtjS_.js.br
├── purify.es-C8XzVQYd.js
├── purify.es-C8XzVQYd.js.br
├── react-dom-U4kpXZKZ.js
├── react-dom-U4kpXZKZ.js.br
├── requestResetLink-Dp1OZlJ_.js
├── requestResetLink-Dp1OZlJ_.js.br
├── rolldown-runtime-B0Z9INg1.js
├── rolldown-runtime-B0Z9INg1.js.br
├── runtime.module-CtsRafOp.js
├── runtime.module-CtsRafOp.js.br
├── ruPay-CuiaOS3H.png
├── signup-8cuaXKv4.js
├── signup-8cuaXKv4.js.br
├── someDark-CtHhfJ8C.png
├── someWhite-CfKA37w0.png
├── swagger-aYdfk5va.js
├── swagger-aYdfk5va.js.br
├── swagger-DCcKHqoP.css
├── swagger-DCcKHqoP.css.br
├── TeliaFavicon-D14ETod5.png
├── test1-CG-mO7cd.js
├── test1-CG-mO7cd.js.br
├── tslib.es6-dZRFYjBM.js
├── tslib.es6-dZRFYjBM.js.br
├── useFaviconEffect-nmHHrHTB.js
├── useFaviconEffect-nmHHrHTB.js.br
├── useMessageStream-Cir7htTx.js
├── useMessageStream-Cir7htTx.js.br
├── vaadin-tabs-DN4d8yqn.js
├── vaadin-tabs-DN4d8yqn.js.br
├── VerticalLayout-CFIGh8uh.js
├── VerticalLayout-CFIGh8uh.js.br
└── visa-ZkDu7zQT.jpg
index.html vite 8.2.2
<script type="module" crossorigin src="./VAADIN/build/indexhtml-Bx1tVvKf.js"></script>
<link rel="modulepreload" crossorigin href="./VAADIN/build/rolldown-runtime-B0Z9INg1.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/jsx-runtime-Ciaf_P-h.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/components-CJCiXHEq.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/preload-helper-vA8C0XsV.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/lib-Dkl2lMZT.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/runtime.module-CtsRafOp.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/tslib.es6-dZRFYjBM.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/auth-BNhn-Jqb.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/directive-DjBQiPm1.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/react-dom-U4kpXZKZ.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/client-BSgjoOxt.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/VerticalLayout-CFIGh8uh.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/classnames-BnhHqKff.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/components-CRhjDndC.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/useFaviconEffect-nmHHrHTB.js">
<link rel="stylesheet" crossorigin href="./VAADIN/build/components-BBHS8qYV.css">
<link rel="stylesheet" crossorigin href="./VAADIN/build/indexhtml-z7r25Frt.css">
Files vite 7.3.6
├── index.html
├── index.html.br
└── VAADIN
└── build
├── @index-B24g9y8i.js
├── @index-B24g9y8i.js.br
├── @index-B34kozl6.js
├── @index-B34kozl6.js.br
├── @index-BBZfKx1I.js
├── @index-BBZfKx1I.js.br
├── @index-Bmczjoi5.js
├── @index-Bmczjoi5.js.br
├── @index-BxaOwYxP.js
├── @index-BxaOwYxP.js.br
├── @index-Ca0aSAol.js
├── @index-Ca0aSAol.js.br
├── @index-CCAnZe2A.js
├── @index-CCAnZe2A.js.br
├── @index-DDb4C-YO.js
├── @index-DDb4C-YO.js.br
├── @index-DmdA4Rnf.js
├── @index-DmdA4Rnf.js.br
├── @index-DroP5Nd-.js
├── @index-DroP5Nd-.js.br
├── @index-ihsuAynD.js
├── @index-ihsuAynD.js.br
├── @index-IRQBJzIW.js
├── @index-IRQBJzIW.js.br
├── @index-pjyzvIQC.js
├── @index-pjyzvIQC.js.br
├── @index-uYLYKvcw.js
├── @index-uYLYKvcw.js.br
├── acribon-logo-CvJ3oV8A.svg
├── acribon-logo-CvJ3oV8A.svg.br
├── acribon-logo-dark-Ds_JYlLw.svg
├── acribon-logo-dark-Ds_JYlLw.svg.br
├── Amex-o_mIdQzM.png
├── ApplicationConnection-BKJnEHm_.js
├── ApplicationConnection-BKJnEHm_.js.br
├── browser-Dm_fo18R.js
├── browser-Dm_fo18R.js.br
├── Candid-Black-nvTlsyho.otf
├── Candid-Black-nvTlsyho.otf.br
├── Candid-BlackItalic-BjeJy1tI.otf
├── Candid-BlackItalic-BjeJy1tI.otf.br
├── Candid-Bold-4UZfkMp2.otf
├── Candid-Bold-4UZfkMp2.otf.br
├── Candid-BoldItalic-DROQxX6k.otf
├── Candid-BoldItalic-DROQxX6k.otf.br
├── Candid-ExtraBold-DCTLgswe.otf
├── Candid-ExtraBold-DCTLgswe.otf.br
├── Candid-ExtraBoldItalic-BIVH-Gfe.otf
├── Candid-ExtraBoldItalic-BIVH-Gfe.otf.br
├── Candid-Light-D1lWYt7f.otf
├── Candid-Light-D1lWYt7f.otf.br
├── Candid-LightItalic-Bv71LITe.otf
├── Candid-LightItalic-Bv71LITe.otf.br
├── Candid-Medium-BkoNhBd_.otf
├── Candid-Medium-BkoNhBd_.otf.br
├── Candid-MediumItalic-C3-Y6S17.otf
├── Candid-MediumItalic-C3-Y6S17.otf.br
├── Candid-Regular-BdAeDLam.otf
├── Candid-Regular-BdAeDLam.otf.br
├── Candid-RegularItalic-BC8Zj4jG.otf
├── Candid-RegularItalic-BC8Zj4jG.otf.br
├── Candid-SemiBold-CLWI8zDN.otf
├── Candid-SemiBold-CLWI8zDN.otf.br
├── Candid-SemiBoldItalic-BCawTp6i.otf
├── Candid-SemiBoldItalic-BCawTp6i.otf.br
├── Candid-Thin-Bkiy2EZl.otf
├── Candid-Thin-Bkiy2EZl.otf.br
├── Candid-ThinItalic-CjfARdbq.otf
├── Candid-ThinItalic-CjfARdbq.otf.br
├── Candid-UltraLight-CNgB0e4N.otf
├── Candid-UltraLight-CNgB0e4N.otf.br
├── Candid-UltraLightItalic-DiX-2uUB.otf
├── Candid-UltraLightItalic-DiX-2uUB.otf.br
├── changePassword-S55WTQpK.js
├── changePassword-S55WTQpK.js.br
├── Checkbox-Csr82Llt.js
├── Checkbox-Csr82Llt.js.br
├── commonjsHelpers-CE1G-McA.js
├── commonjsHelpers-CE1G-McA.js.br
├── CompanyTelia-_nRXf7-A.svg
├── CompanyTelia-_nRXf7-A.svg.br
├── CompanyTopcom-BplCzXMp.png
├── defaultContactImage-Cgdz8AGK.jpg
├── demo-8gcbjyLr.js
├── demo-8gcbjyLr.js.br
├── dinersClub-DRSWgrMa.png
├── discover-CJXkcKf3.jpeg
├── EmptyStateCta-BTCYxpvx.js
├── EmptyStateCta-BTCYxpvx.js.br
├── fa-brands-400-Co6qPm93.woff2
├── fa-duotone-900-Bxa1mK0y.woff2
├── fa-light-300-CsIbtatK.woff2
├── fa-regular-400-Dzw9S-Dd.woff2
├── fa-solid-900-Ssz3Nst8.woff2
├── fa-thin-100-BRZmsfLa.woff2
├── FlowBootstrap-DSmR1u5w.js
├── FlowBootstrap-DSmR1u5w.js.br
├── FlowClient-BQJeBgYE.js
├── FlowClient-BQJeBgYE.js.br
├── FormLayout-i_S2-Smi.js
├── FormLayout-i_S2-Smi.js.br
├── generated-flow-imports-CIjcmluI.js
├── generated-flow-imports-CIjcmluI.js.br
├── index-B04uAt_5.js
├── index-B04uAt_5.js.br
├── indexhtml-CmQ1AohW.css
├── indexhtml-CmQ1AohW.css.br
├── indexhtml-DqsOtHbG.js
├── indexhtml-DqsOtHbG.js.br
├── jcb-DQN-in8U.jpeg
├── LekabFavicon-Dy72aKaY.png
├── markdown-helpers-BhTkKAEd.js
├── markdown-helpers-BhTkKAEd.js.br
├── mastercard-l04n8YAj.png
├── new-BeYB6ZhK.js
├── new-BeYB6ZhK.js.br
├── new-CwM7Rq0G.js
├── new-CwM7Rq0G.js.br
├── new-D3ZgHXLD.js
├── new-D3ZgHXLD.js.br
├── new-DfOdc-36.js
├── new-DfOdc-36.js.br
├── new-E66g4z2g.js
├── new-E66g4z2g.js.br
├── OutreachEndpoint-BCePQ5po.js
├── OutreachEndpoint-BCePQ5po.js.br
├── OutreachForm-Cggml0q_.js
├── OutreachForm-Cggml0q_.js.br
├── outreachRunColumns-CHsurpPm.js
├── outreachRunColumns-CHsurpPm.js.br
├── page-CbhuJipj.js
├── page-CbhuJipj.js.br
├── PasswordResetEndpoint-DSWKXHYK.js
├── PasswordResetEndpoint-DSWKXHYK.js.br
├── purify.es-CqxHTgmJ.js
├── purify.es-CqxHTgmJ.js.br
├── RadioGroup-CsoH8Rv_.js
├── RadioGroup-CsoH8Rv_.js.br
├── requestResetLink-DH-9J7OH.js
├── requestResetLink-DH-9J7OH.js.br
├── ruPay-CuiaOS3H.png
├── signup-Dr2bYCvw.js
├── signup-Dr2bYCvw.js.br
├── someDark-CtHhfJ8C.png
├── someWhite-CfKA37w0.png
├── swagger-B_zvvcQR.css
├── swagger-B_zvvcQR.css.br
├── swagger-DDJJOzmm.js
├── swagger-DDJJOzmm.js.br
├── TeliaFavicon-D14ETod5.png
├── test1-B9Rtm4tk.js
├── test1-B9Rtm4tk.js.br
├── useMessageStream-BJbah8JI.js
├── useMessageStream-BJbah8JI.js.br
├── vaadin-progress-bar-B1BdnGJW.js
├── vaadin-progress-bar-B1BdnGJW.js.br
├── vaadin-tabs-CMhqVEVJ.js
├── vaadin-tabs-CMhqVEVJ.js.br
└── visa-ZkDu7zQT.jpg
index.html vite 7.3.6
<script type="module" crossorigin src="./VAADIN/build/indexhtml-DqsOtHbG.js"></script>
<link rel="modulepreload" crossorigin href="./VAADIN/build/commonjsHelpers-CE1G-McA.js">
<link rel="stylesheet" crossorigin href="./VAADIN/build/indexhtml-CmQ1AohW.css">
There are apparently some rolldown issues and PRs open that may or may not be related to this, such as
- [Bug]: `export` syntax breaks strictExecutionOrder and code splitting · Issue #9039 · rolldown/rolldown · GitHub
- fix(code-splitting): initialize leaves behind a re-exported namespace import by hyfdev · Pull Request #10694 · rolldown/rolldown · GitHub
- [Bug]: strict execution order output creates unresolved async init cycle with TLA · Issue #9548 · rolldown/rolldown · GitHub
- fix(code-splitting): eagerly initialize wrapped modules whose init calls land in later chunks by hyfdev · Pull Request #10708 · rolldown/rolldown · GitHub
One suggestion that came up was to try adding
build: { rolldownOptions: { output: { advancedChunks: {
groups: [{ name: 'app', test: () => true, priority: 100 }] } } } }
to vite.config.ts and see if affects things or not
Tried it and there is still a blank page.
The list of imports shrank so it did something different anyways.
<script type="module" crossorigin src="./VAADIN/build/indexhtml-DDUqyojl.js"></script>
<link rel="modulepreload" crossorigin href="./VAADIN/build/rolldown-runtime-Cyuzqnbw.js">
<link rel="modulepreload" crossorigin href="./VAADIN/build/app-Bh6KU4ci.js">
<link rel="stylesheet" crossorigin href="./VAADIN/build/app-EkpvFTKm.css">
Is there an outlet div on the page and is it completely empty or contains some placeholder?
These are set at various stages during the bootstrap, which might tell where it fails.
document.getElementById('outlet')._root
document.getElementById('outlet').innerHTML
window.Vaadin?.routesConfig
Another option would be to put a browser breakpoint e.g. in index.tsx and see that it gets there and/or where it gets stuck.
I find it difficult to debug the production build. The app works fine in dev mode with vita 8 and with vite 7 in the production build. There is a lot of time wasted to try to make the vite 8 build work so I have decided to stick with vite 7 for now. I am patching the flow-server jar with vite 7 versions of com/vaadin/flow/server/frontend/dependencies/vite/package.json and vite.generated.ts.