Using set_response_code(404) removes CSS / stylesheet

_al
Participant | Elite Partner
Participant | Elite Partner

We're using {{ set_response_code(404) }} to manually trigger the 404 page under some circumstances.

 

This works fine, the 404 response code is set, and the 404-template is rendered instead of the template that triggered the 404.

 

We're also using {{ require_css(get_asset_url('../../dist/app.css')) }} to add our stylesheet in our base-template. This too works fine obviously.

 

However, for some reason, when we trigger the 404, the app.css is removed from the rendered template.

 

Looking at the source code of a manually triggered 404 page, and a regular 404 page (a URL that simply doesn't exist), they look identical except for one missing line which is <link rel=stylesheet href=app.css> (shortened) (also see screenshots of HTML).

 

Has anyone experienced this before? Why would this be happening? We're fairly certain this actually did work a couple of months back because when we built this site we obviously tested it plenty, including the manually triggered 404-pages, and this bug never came up in testing.

9 Replies 9
GRajput
Recognized Expert | Platinum Partner
Recognized Expert | Platinum Partner

Hi @_al 
When a 404 is triggered manually using 

{{ set_response_code(404) }}

, HubSpot may switch to the system 404 layout, which can skip any  

require_css

calls from the original template. Adding the stylesheet directly in the 404 template or in a global include that the 404 template also uses ensures the CSS loads consistently.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.

Thanks!




Gaurav Rajput
Director, MarTech( Growth Natives)

Book a meeting


0 Upvotes
_al
Participant | Elite Partner
Participant | Elite Partner

It doesn't switch the template though. It renders the exact same template, only the CSS is missing for some reason.

0 Upvotes
STierney
Community Manager
Community Manager

Hey @_al - thanks so much for these updates!

I'd like to re-tag @GRajput to see if he has any insight given this extended context.

Shane, Senior Community Moderator





loop


Loop Marketing is a new four-stage approach that combines AI efficiency and human authenticity to drive growth.

Learn More




0 Upvotes
RubenBurdin
Guide

Hi @_al , yeah that’s a maddening one, especially since “real” 404s and “forced” 404s look like they should be identical. 

What’s happening under the hood is usually about when HubSpot collects required assets. require_css() doesn’t print a <link> immediately. It registers the dependency so HubSpot can later inject it into {{ standard_header_includes }} in the final <head> render.

HubSpot’s docs explicitly say the link tag is added inside standard_header_includes. (https://developers.hubspot.com/docs/cms/reference/modules/files) And standard_header_includes is the...https://developers.hubspot.com/docs/cms/reference/hubl/variables)

 

With set_response_code(404), you’re in undocumented territory, and the most common failure mode is: the 404 swap happens after the dependency collection phase for the original request, so the “required CSS” registry is effectively reset or never re-applied to the system 404 render context.

 

That would also explain why your JS still shows up if it’s being required in a different phase or location.

One quick thing to sanity-check: is your set_response_code(404) called before anything outputs the <head> / before {{ standard_header_includes }} runs? If it’s not right at the top, try moving it as early as possible. If that still doesn’t fix it, the most reliable workaround is to ensure the 404 system template itself requires the theme CSS (and ideally via an absolute get_asset_url('/...') path, not ../../), so the CSS requirement is registered in the actual template HubSpot ends up rendering. Hope this helps.

Did my answer help? Please mark it as a solution to help others find it too.

Ruben Burdin Ruben Burdin
HubSpot Advisor
Founder @ Stacksync
Real-Time Data Sync between any CRM and Database
Stacksync Banner
0 Upvotes
_al
Participant | Elite Partner
Participant | Elite Partner

Thanks for this. Makes sense. What's confusing is that it did work previously (a few months back).

 

I guess I'll try require_css() again in the 404-template and hope that won't make it include the CSS twice for regular 404s (where the CSS is already included).

 

The set_response_code() call is made on the module level, so well nested inside the base-template, the template that extends base and then a module that's inside that template.

 

But I'll keep digging.

0 Upvotes
BérangèreL
Community Manager
Community Manager

Hi @_al, I hope that you are well!

Thanks for reaching out to the HubSpot Community!

I'd like to share these resources that might help you:

- Require_CSS
- Error pages
- System Pages Tab

Now, let's put you in touch with our Top Experts: Hi @Mike_Eastwood, @Anton and @Christensen do you have have any insights to share with @_al, please?
 

Thanks so much and have a lovely day!
Bérangère





loop


Loop Marketing is a new four-stage approach that combines AI efficiency and human authenticity to drive growth.

Learn More




0 Upvotes
_al
Participant | Elite Partner
Participant | Elite Partner

Thanks for your reply, but those links won't help at all which should be obvious if you read the question.

 

Here's hoping someone with inner knowledge of HS CMS will reply. set_response_code() isn't even a documented function so I don't really expect to get a real answer to this.

0 Upvotes
BérangèreL
Community Manager
Community Manager

Hi @_al and thanks for sharing these additional details.

When using require_css(get_asset_url('../../dist/app.css')), the CSS is added to {{ standard_header_includes }} in the <head>.

When set_response_code(404) triggers the 404 template to render instead of the original template, it seems the CSS requirements from the original template may not be carrying over.


Here are some workarounds you might want to try:
 

- CSS loaded via require_css() is rendered within {{ standard_header_includes }} in the <head>. When a 404 template is triggered, it may be rendering a different template context that doesn't include the CSS requirements from the original template.

- Ensure your 404 template has its own require_css() call for the stylesheet, rather than relying on inheritance from a base template.

Let's invite some of our Top Experts to this discussion: Hi @d-lupo@RubenBurdin and @sylvain_tirreau do you have other suggestions to help @_al, please?

Thanks so much and have a wonderful weekend!
Bérangère

This post was created with the assistance of AI tools.





loop


Loop Marketing is a new four-stage approach that combines AI efficiency and human authenticity to drive growth.

Learn More




_al
Participant | Elite Partner
Participant | Elite Partner

Thanks. Just to clarify, it's only when we manually trigger a 404 using set_response_code() that this happens. Our 404-template is being rendered, but the CSS is missing.

 

When a regular 404 page shows up the very same template is rendered, but the CSS is NOT missing.

 

Regular 404: https://gronflagg.se/this-is-a-404

Manually triggered 404: https://gronflagg.se/resa/134811631852

 

If you look at the Network tab in devtools you'll see it loads the exact same things except for 4 files; the CSS (template_app.min.css) and the three font files that the CSS references.

 

Our JS-file, included using {{ require_js(get_asset_url('../../dist/app.js')) }} is loaded in both cases however.

0 Upvotes