[🐞] Dynamic params in url [...id] breaks the app

[robisim74]

Which component is affected?

Qwik City (routing)

Describe the bug

With the latest versions, Qwik 0.14.0 and QwikCity 0.0.125, an app with a dynamic route segment is completely broken.

If you see in browser console you will find this error:

Failed to load resource: the server responded with a status of 404 (Not Found)
https://qwikstarterqkvafb-0kvx--5173.local-credentialless.webcontainer.io/node_modules/vite/dist/client/env.mjs/

It doesn't find node_modules/vite/dist/client/env.mjs/, and consequently it is unable to load any client files.

Reproduction

https://stackblitz.com/edit/qwik-starter-qkvafb

Steps to reproduce

Once the app has started, see in the browser console, after the web container errors.

Every interaction doesn't work.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @builder.io/qwik: 0.14.0 => 0.14.0 
    @builder.io/qwik-city: 0.0.125 => 0.0.125 
    vite: 3.2.4 => 3.2.4

Additional Information

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-qkvafb (Open reproduction)

[zanettin]

Still present on 0.14.1. Imo it is related to #2175 / #2185 . @adamdbradley any idea how to fix that issue?

@robisim74 i was able to workaround it by changing the vite config for qwikCity by disabling the trailingSlash feature:

export default defineConfig(() => {
  return {
    plugins: [
      qwikCity({ trailingSlash: false }),
      qwikVite(),
      tsconfigPaths()
  };
});

thanks a lot for creating this issue and your debugging @robisim74 🙏

[robisim74]

@zanettin Thanks for the workaround, it works! But it's not clear what we're disabling and if it can have any other side effects

[zanettin]

@robisim74 totally agree! if your app is on prod my suggestion would be to stay on 0.13.3 till Adam had a chance to look into this issue.

i am not a core team member, so just can tell you what i see based on the mentioned PRs and my personal experience 😄 i have two test apps currently. one w/o catchall routes which works just fine with the upgrade. the only thing that changed is, that all routes now have a trailing slash in the url (/about => about/).

on my second app w/ catch all routes defined, i've disabled the option as mentioned before and deployed it to cloudflare pages which seems to work as before.

[adamdbradley]

Thanks for opening the issue. It looks like there was an incorrect 302 redirect for the vite client file, which has been fixed as of Qwik City 0.0.127. Thanks

[robisim74]

@adamdbradley The problem is still present in Qwik City 0.0.127. Please, see the repro: https://stackblitz.com/edit/qwik-starter-qkvafb

[robisim74]

Solved in Qwik City 0.0.128. Maybe a typo. Thanks

[zanettin]

@robisim74 @adamdbradley i have this behaviour on 0.15.0 and 0.0.128:

w/ trailingSlash: false option

• app crashes with error: QWIK WARN A unsupported value was passed to the JSX, skipping render. Value: Symbol(skip render)

w/o trailingSlash option or set to true

• works as expected 👍

same on your end?

[robisim74]

@zanettin Yes, with trailingSlash set to true (default) now it works as expected (but there are trailing slash everywhere, also in router params...). With false, the app crashes but only in home page http://127.0.0.1:5173/, http://127.0.0.1:5173/page works.

[zanettin]

@robisim74 thanks for checking 🙏 can confirm that as well. Just the home is affected 👍 i'll create a new issue for this 🙏