Parameterized pages not loading data in v14

[archiewood]

Bug Description Parameterized pages are not rendering correctly in latest release. They appear to "flash" correctly before rendering error states for components.

Examples:

• https://meltanolabs.github.io/jaffle-shop-template/Philadelphia/
• https://mdsinabox.com/teams/mil/

Severity

• [x] High - I'm not able to use Evidence until this bug is fixed
• [ ] Medium - I'm able to use Evidence, but a feature I need to use is not working
• [ ] Low - I'm able to keep using Evidence as normal, but flagging this for the team to fix

Expected Behavior Components should render correctly

[archiewood]

@matsonj @aaronsteers FYI

[aaronsteers]

Thanks, @archiewood, for logging! 🙏

[archiewood]

I think I was a bit hasty.

688 does not seem to fix this in production

[hughess]

This reminds me of an issue we solved recently, where clicking the table of contents would error out the components on a production parameterized page: #590. The cause of that issue was trailing slashes getting appended to the URL when the TOC links were clicked.

On checking the URLs in v15, it seems that a trailing slash is being appended for all pages:

E.g., if you navigate to mysite.com/company, it will redirect to mysite.com/company/

This may be the cause of the components breaking on the page (although I don't know exactly how)

[archiewood]

Very interesting. Good idea.

If the url went from www.example.com/company/acme to www.example.com/company/acme/

Could {$page.params.company} then refer to eg acme/ rather than acme?

Which might then cause all the filters to error out in the components, as there are only records with acme

[archiewood]

https://learn.svelte.dev/tutorial/trailingslash

[archiewood]

If you disable JS on the webpage, it show up.

And if you look at the requests in the browser I notice two things:

1. If you navigate to mdsinabox.com/teams/mil you get redirected to mdsinabox.com/teams/mil/
2. mdsinabox.com/teams/mil/ returns an HTML page that contains all the data, rendered correctly

[hughess]

A few other pieces of info to help us narrow this down:

1. We have this line in our layout file to set trailing slashes in sveltekit: https://github.com/evidence-dev/evidence/blob/12d04899b9dcc5dc54b51c58c671837b8f9cdd83/sites/example-project/src/pages/%2Blayout.server.js#L5

2. Our most recent release's vercel preview is able to display our parameterized page example in production: https://evidence-development-workspace-git-changese-3c260c-evidence-dev.vercel.app/parameterized-pages/Dallas/

[archiewood]

Note that the parameterized page example we have running in example-project does not replicate the issue, it uses the syntax: /category/[page].md not [category]/page.md

This may matter because one of these generates eg /countries/canada.html and the other generates /countries/canada/index.html which Netlify, for example, treats differently

This is an example of where our dev environment works differently to a user project, I believe.

[ud3sh]

@archiewood @matsonj As of v15, this only seems to occur under the following conditions:

1. You are using parametrized pages on Netlify
2. You are looking up non-lowercased data using the page parameter.

Other issues should be solved by this PR that is already in version 15.

This issue was actually happening on Netlify with Evidence version 12 and prior but not as obvious. Attached gif shows this happening on current deployment on v12 on mdsinabox.com. It just takes a few more hops to reproduce it on older versions compared to versions after v12. Post v12, we are loading the data via js/json when the user initially lands on the page, where as with v12 and prior we only did so if you update your DOM by navigating to different places on the site - hence the extra hops.

Underlying issue is Netlify forces all URL paths to be lower case. When Netlify forces the casing on the path to be lowercase (https://mdsinabox.com/teams/MIL -> https://mdsinabox.com/teams/mil/ via redirect), the page param is affected: i.e $page.param.nba_teams goes from 'MIL' -> 'mil'. This results in the data not being found. This is not an issue on initial load of the page in v12 only because the HTML had preloaded the data

Most hosting sites won't force lower case the paths. There is a discussion thread on Netlify around this

@matsonj I created a demo PR on your repo showing how we can get around the Netlify issue (tested out on Netlify, so it should work if you choose to merge it as is).

[ud3sh]

The issue with parameters in the middle of the path not working seems to be restricted to v14 and appears to be fixed in v15. Running example here => https://hilarious-hamster-5fc657.netlify.app/ Between this and the Netlify workaround mentioned in the previous comment, I think we are good to close this one.

[archiewood]

Do you have the source code for that somewhere?

The table on the coupe page looks very odd on iPhone WebKit

See #712

[ud3sh]

Do you have the source code for that somewhere? The table on the coupe page looks very odd on iPhone WebKit See #712

@archiewood https://github.com/eddietestgithub/parametrized-pages-demo/tree/main/pages/%5Bcategory%5D