Repository navigation
'Cannot access url.search on a page with prerendering enabled' when using remote form #17137
Description
Describe the bug
If you have a form on a page that's prerendered...
<script lang="ts">
import { myform } from './remote';
</script>
<form {...myform}>
<button>submit</button>
</form>...an error will occur during build:
Cannot access url.search on a page with prerendering enabled
That's because we read event.url.search here...
...so that we can render the correct action. Something like this should do the trick:
diff --git a/packages/kit/src/runtime/app/server/remote/form.js b/packages/kit/src/runtime/app/server/remote/form.js
index f7d7de6521..95275b672a 100644
--- a/packages/kit/src/runtime/app/server/remote/form.js
+++ b/packages/kit/src/runtime/app/server/remote/form.js
@@ -156,13 +156,24 @@ export function form(validate_or_fn, maybe_fn) {
Object.defineProperty(instance, 'action', {
get: () => {
- const search = new URLSearchParams(get_request_store().event.url.search);
- search.delete('/remote');
+ const { event, state } = get_request_store();
+
+ let action = '?';
+
+ // preserve existing search params, unless we're prerendering
+ // in which case we don't know what they are
+ if (!state.prerendering) {
+ const search = new URLSearchParams(event.url.search);
+ search.delete('/remote');
+
+ const query = search.toString();
+ if (query) action += query + '&;'
+ }
- const query = search.toString();
const action_id = __.key ? `${__.id}/${encodeURIComponent(__.key)}` : __.id;
+ action += `/remote=${action_id}`;
- return `?${query ? `${query}&` : ''}/remote=${action_id}`;
+ return action;
},
enumerable: true
});Reproduction
see above
Logs
System Info
nextSeverity
annoyance
Additional Information
No response
Activity
fix: render remote form actions on prerendered pages (sveltejs#17139)