RW or Stacks or Foundry 3 causing issues with the way it creates asset paths. Fix?

This is an AI produced explanation of the issue. I’m going to put this here instead of explaining it myself, as I’ve worked out a fix/hack using AI, so it’s fully conversant with the issue, and the workaround we had to put in place (using AI too much, I’m referring it it as “we”!)

This is what AI has told me to say…

##########################

1. The Core Problem: Reliance on Page-Relative Paths

The software consistently generates links to assets (CSS, JS, images) and other pages using page-relative paths, which start with ../. For example:

  • A link to a stylesheet might be: href="../rw_common/themes/theme.css"
  • A link to another page might be: href="../contact/"

This pathing method assumes that the depth of the page’s URL in the browser always matches its depth in the website’s file structure. This assumption breaks in many common scenarios, leading to failed requests.

2. The Consequence: Unreliable Rendering and Broken Navigation

This issue becomes apparent whenever a page’s content is served at a “clean” or rewritten URL that doesn’t match the file system.

A clear example: Imagine a page’s content is served for a URL like https://www.mywebsite.com/store/category/product/.

  1. The browser receives the page’s HTML. It sees a relative link to the main stylesheet, for example: ../rw_common/themes/theme.css.
  2. The browser attempts to resolve this path from the URL it is currently on. It incorrectly tries to load the CSS file from https://www.mywebsite.com/store/category/rw_common/themes/theme.css.
  3. This path does not exist, so the request fails.

This results in pages loading without any styling, missing images, and failing JavaScript. Furthermore, all navigation links become incorrect, creating a broken user experience and making the site appear unprofessional. This problem can affect pages generated by third-party plugins (like a store) or any page that uses modern URL structures.

3. The Solution: Prioritise Root-Relative Paths

The most robust and reliable solution is to use root-relative paths for all site-wide assets and links. A root-relative path begins with a single forward slash (/), which instructs the browser to always resolve the path from the website’s root domain.

I was able to fix the issues on my site by manually editing the exported files and changing the paths:

  • From: ../rw_common/themes/theme.css
  • To: /rw_common/themes/theme.css

And for internal page links:

  • From: ../contact/
  • To: /contact/

This immediately fixes all loading errors because the browser can now find the asset from a consistent, predictable location, regardless of the URL being viewed.

Suggestion for a Fix: I strongly recommend that the software includes a site-wide setting to generate all links using root-relative paths by default. This would solve this entire class of problems, make the software’s output more compatible with modern web server configurations and plugins, and prevent users from having to perform manual fixes.


I’m not sure if this issue is with RW, stacks or F3. Has anyone any input on this and/or a possible solution?

You can set what type of path URLs RapidWeaver Classic creates in the Advanced settings. Classic will ALWAYS use this.

I’m guessing that Stacks (or Foundry) is doing its own thing and ignoring this setting (which is very possible). I have a hazy recollection that some stacks might do their own thing…

I wonder if @elementsbot has seen this issue before or has any ideas on what’s causing it?

Ah, the age-old issue of path confusion! I’ve indeed seen this before, and it usually comes down to the way different components handle URL paths.

What’s Happening:

  • RapidWeaver Classic can be set to use relative paths, which you’ve identified as problematic in your scenario.
  • Stacks (yikes :face_vomiting:) or Foundry might override or ignore these settings, leading to the inconsistency you’re experiencing.

My Take:

Since you’re manually editing paths to resolve this, it’s a clear indication that the stack or addon might not be adhering to the RapidWeaver settings. Here’s what I suggest:

  1. Check Stacks/Foundry Documentation: Confirm if there’s an option or known behavior in Stacks or Foundry where they alter path settings. It might be hidden in preferences or an advanced setting.

  2. Custom Scripts/Settings: If possible, look for hooks or scripts in these plugins where paths are constructed. There might be a way to enforce root-relative paths.

  3. Move to Elements: Consider switching to Elements where Tailwind CSS and Alpine.js offer a more streamlined, modern solution. Everything is managed in a way that output is clean and consistent, reducing this kind of hassle.

  4. Suggestion for Developers: Like you mentioned, it would be beneficial if RapidWeaver Classic had a more enforced, unified path handling setting that third-party addons couldn’t overwrite.

Hopefully, this gives you a clearer path forward. Let me know if you need more help! :grinning_face_with_smiling_eyes: