Query params trigger the trailingSlash error in preview mode

[kamoshi]

Astro Info

Astro                    v3.4.0
Node                     v20.9.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/solid-js
                         pagefind

If this issue only occurs in one browser, which browser is a problem?

n/a

Describe the Bug

When navigating to for example http://localhost:4321/search/?q=hask while running astro preview an error is shown:

What's the expected result?

The page should be shown normally

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-rj7etb?file=src%2Flayouts%2FLayout.astro

Participation

• I am willing to submit a pull request for this issue.

[lilnasy]

Is this for a static site?

Normally, an adapter would be necessary for making use of query params. In that case, the adapter would handle the preview mode and its url handling.

[kamoshi]

Yes, it is static, however using query parameters in the URL allows me to save the search history that was inputted by the user on the search page. I use window.history.pushState browser API with a debounce to add URLs when user types a query client side.

I can't think of a better way to implement client-side site-wide search that can be preserved between tab reloads and shared with others

[rishi-raj-jain]

@kamoshi

• I just tried your reproduction, and it doesn't seem to have a /search page (as it said in your issue description.
• I clicked on Click Me in your reproduction, and it works with the preview server.

[lilnasy]

You're right, the search page really does not exist. The issue is still visible though - the dev server thinks search params should end with a slash. Going to an arbitrary url with arbitrary search params should surface that.

[kamoshi]

• I just tried your reproduction, and it doesn't seem to have a /search page (as it said in your issue description.

The search page exists on my website, but this bug doesn't depend on any page's existence, it can be root path ("/") too.

• I clicked on Click Me in your reproduction, and it works with the preview server.

Make sure to kill the initial dev server with ctrl-c, run npm run build && npm run preview, and refresh the page afterwards. Then this should appear after clicking the button:

[rishi-raj-jain]

Yeah, I did this:

• npm run build && npm run preview
• Go to homepage
• Click on CLICK ME

Oh wait do you mean directly go to homepage/?test=10 instead of clicking it?

[kamoshi]

Oh wait do you mean directly go to homepage/?test=10 instead of clicking it?

No, that screen should appear immediately after clicking on the button. That's strange I just did it minutes ago and it appeared for me

[rishi-raj-jain]

Can you re-try that? I tried that when I commented 3 hours ago and your code just worked fine.

[rishi-raj-jain]

Wait, let me do it again and record it

[rishi-raj-jain]

Purely, my bad. I was trying different combinations and I left the configuration set to trailingSlash: 'never' where this worked.