qwik: [🐞] Router URL does not change when compiled as SSG

Which component is affected?

Qwik City (routing)

Describe the bug

When I compile the App as SSG (using the Static site (.html)) adapter it does not update the URL on route change. It works only for the dev environment and for the compiled output with JavaScript disabled. When I run a webserver and serve the compiled output without disabling JavaScript it won’t update the URL.

In my app and in the reproduction app I only use the Link component exported by qwik-city.

In the provided reproduction (which is the unmodified CLI created qwik app) I would expect that it updates the URL in all cases.

For example:

from http://127.0.0.1:5173 to http://127.0.0.1:5173/todolist when I got routed after clicking on the “TODO demo” button
from http://127.0.0.1:5173 to http://127.0.0.1:5173/flower when I got routed after clicking on the “Blow my mind” button

It also did not work as expected for the versions 0.18.1 for Qwik and 0.2.1 for Qwik-City.

Reproduction

https://github.com/ngfelixl/qwik-routing-reproduction

Steps to reproduce

npm create qwik@latest (Let’s create a Qwik App (v0.19.2)
npm run qwik add and select "Adapter: Static site (.html files)
npm run build

Running as

npm start (1)
npx http-server ./dist or deploy ./dist folder output on Vercel (2)

Then

Click on one of the bottom buttons and watch the URL
1 the URL updates
2 the URL does not update

System Info

System:
    OS: macOS 12.3
    CPU: (8) arm64 Apple M1 Pro
    Memory: 730.95 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    npm: 8.16.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Safari: 15.4
  npmPackages:
    @builder.io/qwik: 0.19.2 => 0.19.2 
    @builder.io/qwik-city: 0.4.0 => 0.4.0 
    undici: 5.20.0 => 5.20.0 
    vite: 4.1.4 => 4.1.4

Additional Information

About this issue

Original URL
State: closed
Created a year ago
Reactions: 5
Comments: 29 (15 by maintainers)

Most upvoted comments

Thanks for the repo case and comments. The previous problem was that the URL origin it was comparing to was the same one that the site was built with, during SSG. Which if it wasn’t set, would be different than what’s deployed.

Since the navigation check is on the client, I updated it so it made sure the location came directly from window.location.href, which would have the correct origin at runtime.

I also added more e2e tests to hopefully check any regressions earlier. Thanks again for the help!

https://github.com/BuilderIO/qwik/pull/3810

adamdbradley on Apr 17, 2023

Can confirm this also happens when deploying running with “Nodejs Express Server” and then run: npm run deploy

Tried various reverse proxy solutions before I came across this report. Work 100% without SSL but happens as soon as I introduce SSL to the mix. Can confirm that @swwind solution work if I switch to SSG.

limotek on Mar 14, 2023

We’re facing the same issue using with SSR and interestingly enough only once we enable encrypted traffic (over HTTPS).

kldzj on Mar 6, 2023

I am having this same issue after updating to @builder.io/qwik-city: 0.4.0. The only difference is I am using SSR instead of SSG. I am also using the Epxress adapter. It was working fine before updating qwik-city. If I disable javascript in the browser the URL changes as expected. Is there a workaround for this in production?

raine-works on Feb 26, 2023

We also have the issue with nginx ingress.

For the maintainers see these as well: https://github.com/BuilderIO/qwik/issues/3537

We really need a fix or a suggestion how to fix this.

tzdesign on Mar 30, 2023

Still occurs when deploying with “Nodejs Express Server” and then running: npm run deploy

astraldev on Mar 19, 2023

So, this is to prevent CROSS origin calls to actions, loaders, even auth, extremely important code. All frameworks have it in a way.

Sometimes, we are not able to figure out the source origin, so it need to be passed as a environment variable. If you deploy to express, cloudflare, netlify this is solved by the adaptor… But in express, it’s on your plate.

Gonna work on better docs, better error messages for this.

manucorporat on Apr 6, 2023

@lbensaad’s pr is not solving this issue.

I don’t understand this part in vite-server, on what level are the envs set?: https://github.com/BuilderIO/qwik/blob/7fb20862c0bf1f4f7835cc6725686d5eb97d6a6f/packages/qwik/src/optimizer/src/plugins/vite-server.ts#L13-L22

I logged on middleware level and the getOrigin function in vite-server.ts is the origin of this error.

 console.log({
    PROTOCOL_HEADER,
    HOST_HEADER,
    headers: req.headers,
    socket: (req?.socket as any)?.encrypted,
    connection: (req?.connection as any)?.encrypted
  });

All empty so it will fallback on http all the time in production.

For everyone who needs a qwik fix, set the ORIGIN to your domain in production.

Does someone know why this was done with environment variables and did we all just miss something?

tzdesign on Mar 31, 2023

It get’s even wilder:

I don’t know what the qwik router is expecting, but it even blocks server$ POSTs.

Please keep in mind, that this is working 100% on preview and serving locally with express. As soon as https is there it just stops working.

tzdesign on Mar 30, 2023

Experiencing this using the latest versions of qwik and qwik-city. Happens regardless of TLS. Works fine on dev but as soon as you deploy SSG it doesn’t change URL on navigation.

asplunds on Mar 8, 2023

The issue seems to be related to the client-navigation.ts and qwik-city-component.ts#L228. The handleScroll function does not execute neither. So the app does not scroll to top on route change in this scenario.

ngfelixl on Feb 28, 2023