paoloricciuti / sveltekit-search-params

The easiest way to read and WRITE from query parameters in sveltekit.
https://sveltekit-search-params.netlify.app
MIT License
478 stars 13 forks source link

Crashes with enabled prerendering #67

Closed shilangyu closed 6 months ago

shilangyu commented 6 months ago

Describe the bug

When queryParam is used on a page that has enabled sveltekit prerendering, the build crashes. This in theory is understandable because obviously there are no query parameters during build. However, I would expect the behavior to be the same as in during SSR: I get null and wait for hydration.

Reproduction

Minimal reproduction repo: https://github.com/shilangyu/sveltekit-search-params-prerender

Run npm run build to see the problem.

Logs

Error: Cannot access url.searchParams on a page with prerendering enabled
    at URL.get (file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/chunks/exports.js:92:15)
    at file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/entries/pages/_page.svelte.js:22:35
    at sync (file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/chunks/index.js:66:22)
    at file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/chunks/index.js:89:5
    at Object.subscribe2 [as subscribe] (file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/chunks/index.js:36:14)
    at subscribe (file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/chunks/ssr.js:25:23)
    at file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/entries/pages/_page.svelte.js:49:25
    at Object.$$render (file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/chunks/ssr.js:87:18)
    at Object.default (file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/chunks/internal.js:80:98)
    at file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/.svelte-kit/output/server/entries/fallbacks/layout.svelte.js:3:42

node:internal/event_target:1096
  process.nextTick(() => { throw err; });
                           ^
Error: 500 /
To suppress or handle this error, implement `handleHttpError` in https://kit.svelte.dev/docs/configuration#prerender
    at file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/node_modules/@sveltejs/kit/src/core/config/options.js:202:13
    at file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:65:25
    at save (file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:403:4)
    at visit (file:///Users/marcinwojnarowski/coding/temp/svelte-kit-prerender-query/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:236:3)

Node.js v21.6.1
paoloricciuti commented 6 months ago

This is not a bug with this library, it's just how sveltekit works.

shilangyu commented 6 months ago

I understand that, but could this library just return null just like it does during ssr? Is this a fundamental limitation of sveltekit that cannot be overcome?

Perhaps this should've been a feature request rather than a bug report.

paoloricciuti commented 6 months ago

I understand that, but could this library just return null just like it does during ssr? Is this a fundamental limitation of sveltekit that cannot be overcome?

Perhaps this should've been a feature request rather than a bug report.

The fact is that this library heavily relies on the page store which is what is throwing that error. So you can't actually access the search Paramus anyway. I'll try to look into your repro to see if there's a specific use case we can try to support but it seems very difficult.

Can you talk me more about your use case?

shilangyu commented 6 months ago

My usecase is simply that I am using prerendering with hydration (which I would expect to behave similarly to just ssr+hydration). I host my page as static files rather than behind a server.

If it's hard to support then nevermind, I will try to workaround it externally, however I have been unsuccessful at that so far. I thought that internally for the lib it's just about slapping an if (browser) somewhere.

paoloricciuti commented 6 months ago

My usecase is simply that I am using prerendering with hydration (which I would expect to behave similarly to just ssr+hydration). I host my page as static files rather than behind a server.

If it's hard to support then nevermind, I will try to workaround it externally, however I have been unsuccessful at that so far. I thought that internally for the lib it's just about slapping an if (browser) somewhere.

The if(browser) it's already there but the problem is the store that the library relies on throws an error in prerendering. I could maybe catch that error and return null but that doesn't change the fact that you will still get null when launching the application so i don't know if it's worth?

shilangyu commented 6 months ago

I experimented a bit and adding an extra conditions seems to do the trick. Before accessing .searchParams I check the building flag. If its true I fallback to null. The reactivity is still there and the initial value for the query param is correctly populated. I can send a PR if you want, but I do not want to impose if that doesn't align with the wants of this project.

paoloricciuti commented 6 months ago

Uh this is actually quite interesting... wasn't aware of the building flag....will experiment and update this issue

paoloricciuti commented 6 months ago

Ok this actually works...let me check when building was introduced to make sure it's not a breaking change and i'll push the changes.

https://www.sveltelab.dev/07f3rjiznx0ut2p