class:list works as expected in development, but not in production build

[denniskasper]

What version of astro are you using?

2.8.4

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

linux

What browser are you using?

chrome

Describe the Bug

when running the app in development

npm run dev

the two navigation links get highlighted as expected, current route is marked with a red box.

however, when the app gets build and run in production

npm run build
npm run preview

the links are not properly highlighted.

What's the expected result?

expect same behaviour in dev and prod.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-jeaxqj?file=package.json

Participation

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

[lilnasy]

Thanks for the reproduction, it was super helpful!

I don't believe this is necessarily an issue of astro's dev-build disparity.

You would run into in dev as well if you visit /about/, instead of /about. The code in ClassList.astro does not account for the trailing slash that the static build uses when rendering your pages.

We could default to removing the trailing slash during production builds, but a page similar to yours might still see "disparities" when visiting without the slash in dev mode.

[lilnasy]

And you can always set build.format to "file" to omit the trailing slash for your project.

https://docs.astro.build/en/reference/configuration-reference/#buildformat

[lilnasy]

After looking around more, I see the root cause (unexpected trailing slash) is being tracked in another issue: #5630. It will be considered for the next major version, 3.0.

I think we can close this issue as a duplicate. If you think this should not be the case, feel free to reopen.

[denniskasper]

hi @lilnasy,

thank you very much, that solves my problem.