Streaming Promises on a +page.server file misbehave in a built environment
Open
Nobody has claimed this yet.
vite
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
Streamed Promises work correctly in the development environment (npm run dev), but block the page load in a built environment (For example npm run build && npm run preview)
I'm using the latest version of sveltekit
Reproduction
- Install a new sveltekit app
npm create svelte@latest my-app - Install dependencies
npm install - Create a src/routes/+page.svelte file with the example from the SvelteKit docs
<script>
/** @type {import('./$types').PageData} */
export let data;
</script>
<p>
one: {data.one}
</p>
<p>
two: {data.two}
</p>
<p>
three:
{#await data.streamed.three}
Loading...
{:then value}
{value}
{:catch error}
{error.message}
{/await}
</p>
- Create a src/routes/+page.server.js with the example in the SvelteKit docs
/** @type {import('./$types').PageServerLoad} */
export function load() {
return {
one: Promise.resolve(1),
two: Promise.resolve(2),
streamed: {
three: new Promise((fulfil) => {
setTimeout(() => {
fulfil(3)
}, 1000);
})
}
};
}
- Run the dev environment
npm run devand load the dev page at http://localhost:5174/ (adjust the port if needed)
Enjoy the "loading..." message for a second and then enjoy the final "3" - Now build the app and preview it,
npm run build && npm run previewand load the page at http://localhost:4173/ (adjust the port if needed)
The page blocks for a second, shows "loading..." for an instant and then shows the final "3"
Logs
No response
System Info
System:
OS: Linux 6.1 Fedora Linux 37 (Workstation Edition)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 4.74 GB / 15.35 GB
Container: Yes
Shell: 5.2.15 - /bin/bash
Binaries:
Node: 18.15.0 - /usr/bin/node
npm: 9.5.0 - /usr/bin/npm
Browsers:
Firefox: 111.0
npmPackages:
@sveltejs/adapter-auto: ^2.0.0 => 2.0.0
@sveltejs/kit: ^1.5.0 => 1.14.0
svelte: ^3.54.0 => 3.57.0
vite: ^4.2.0 => 4.2.1
Severity
annoyance
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue with src/routes/+page.svelte and src/routes/+page.server.js using npm run dev, then npm run build && npm run preview. Compare the loading behavior between development and the built preview; done means the streamed promise renders its loading state before resolving in both environments.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, vite
- Domain
- full-stack
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100