Include tag shows "Missing Template" in react project. Bug?

Developer Support CMS Development
1

I’ve been working on migrating a Hubl theme to the newer “React Project” framework using the migration docs and the react project quickstart. This is in reference to the include tag which pulls in a partial. Since our hubl theme is a fairly large project with many modules, I will demonstrate the bug using the theme created via the react project quickstart.

Create a hubl-modules folder, with a test.module folder inside that, and a meta.json and module.hubl.html inside that. Then add a partials folder inside templates with a partial-test.hubl.html file inside that.

- my-theme

-- hubl-modules

--- test.module

---- meta.json

---- module.hubl.html

-- templates

--- partials

---- partial-test.hubl.html

-- etc…

meta.json

{

“label”: “Test Module”,

“css_assets”: [],

“external_js”: [],

“global”: false,

“help_text”: “”,

“host_template_types”: [

“PAGE”

],

“js_assets”: [],

“other_assets”: [],

“smart_type”: “NOT_SMART”,

“tags”: [],

“is_available_for_new_content”: true

}

module.hubl.html

<p>This is a test module.</p>

{% include ‘@projects/my-cms-theme/theme/my-theme/templates/partials/partial-test.hubl.html’ %}

partial-test.hubl.html

<p>This is from the partial!</p>

This will build, but when you add the module to a page and view the source, it displays:

<!-- Missing Template at Path: ‘@projects/my-cms-theme/theme/my-theme/templates/partials/partial-test.hubl.html’ -->

This is despite the template existing in the project UI:

aviolin_0-1776266245238.png
aviolin_0-1776266245238.png400×117 11.1 KB

Note that using any other path in the include tag, including relative paths (../../templates/partials/etc…) ,absolute paths, and other variations of @projects/etc… will result in build errors:

File at path ‘x’ does not exist

This appears to be the only path that DOESN’T result in a build error, and therefore must be the correct path to the file.

I have spent multiple days now trying to figure out how to simply use partials in the way described in the documentation in a Hubl Theme migrated to a React Project. Is this simply a bug? Was the functionality to include partials in modules removed, and if so, where is that documented? Or, what am I doing wrong?

On a side note, I’ve had to spend MULTIPLE HOURS typing this post into here because these forums appear to reformat your post automatically and break any code formatting that may have been entered. For that reason, unfortunately, the code formatting in this post will be jank. It’s quite the cherry-on-top to get even more frustrated with HubSpot just trying to post a question in the forums.

2

Hey @aviolin,
Thank you so much for posting this inquiry in the Community, as well as sharing your feedback on your experience. We apologize for any re-formatting the site has required of you in getting this posted, and I’ll make note of this with the team.
With that said, I’d like to tag in a few of our Community experts to see what insight they might be able to share in regards to the best steps to troubleshooting the errors you seem to be encountering. @Anton, @alyssamwilie, and @MBERARD - do any of you have ideas on how to best approach this inquiry?
Shane, Senior Community Moderator

3

Hey @aviolin,

thank you for taking the time to write it that well documented.

Out of curiosity: Why are you migrating a HubL theme to a React theme?

Just asking, because from my experience there are little to none benefits of a React theme as they’re

  • Not accessible via Design-Manager, development is local only
  • every little change needs to be compiled and pushed
  • If you’re working alone, think about documentation as a potential freelancer or other dev who might take over if you should decide to leave this project might be super frustrated to discover it’s written in React
  • it’s like taking a sledgehammer to crack a nut (personal opinion)

Furthermore HubL themes won’t go away in the next couple of years (my assumption)

But - regardless of this:

The path needs to show at the module folder, not the html file inside and is always from the theme root. In your case it should be

{% include 'my-theme/templates/partials/partial-test.hubl.html' %}

And for the inlcude tag:

This one works only in HubL Templates but not modules or React themes.

For modules it’s import and I’d recommend to use macros for this.

For example:

_test.html

<!--
templateType: "none"
isAvailableForNewContent: false
-->

{% macro test_macro(some_content) %}
 <p>{{some_content}}</p>
{% endmacro %}

in a module.html

{% from "path/to/_test.html" import test_macro %}

...

{{test_macro(module.some_text) }} {# module.some_text is a text field in the module #}

p.s:
If you like to post code in the community, you can find the function once you click on the “…” icon and click the code bracket.

hope this helps

best,

Anton

4

Thans, Anton, for the reply! So for the question, it sounds like the include functionality was removed, since we’ve had these includes working within modules on our current website for a few years now. Reworking them into macros seems like it would work as a workaround, but it’s frustrating that these features are dropped with no reference to it in the documentation.

And I appreciate your notes on migrating the theme. For us, we would like to utilize react moving forward. I understand feeling like it’s probably overkill for a marketing site, but we already do all development locally, and a number of our clients use react so using react would be a smooth transition for us. Our main trigger for this was the concern the Hubl themes may go away (which, silently dropping a feature like “includes” in modules, may forewarn), since HubSpot seems to be focused on moving towards their React themes, and we just wanted to get ahead of that for when it happens. HubSpot seems to have a tendency to make certain features “Legacy” and remove/limit support for those features. If we didn’t think that was a possibility, we’d probably just leave it as is.

5

Hey @aviolin,

might be wrong here but I think includes were never possible in modules. Only in templates.

The docs also state that “… include a file into a file…”, but this might be a bit misleading as it should be “… include a file/partial into a template…”

Thanks for the insight about moving to React themes, it’s a valid argument and if you/your team wants to utilize the newest tech - do it.

Just a quick FYI:

As I’ve mentioned in my first post, I don’t believe that HubL themes won’t be shut down at all and they’ll always be supported.

Why?

Before themes became a thing around Q1 of 2020, so-called Templates and Template-packs were the way to go.

No CLI, no real local dev - only Design-Manager and optionally FTP (yes, this was a thing back then).

Template-Packs had a massive benefit over themes as they could be set up much cleaner and more flexible (themes still generate Bootstrap 2.3.6 classes, while you could use basically anything in Template-Packs)

In Q3 of 2020 the docs mentioned for the first time, that it’s possible to build themes with JS frameworks like Vue or React. I haven’t heard a lot of such “framework themes”, it was an option but not the main focus.

Around 2022/2023 (don’t quote me on that), the Marketplace got updated, all Template-Packs got removed and the official support ended. But this doesn’t mean that they stopped working. Till this day, I got clients who refuse to update their 2010-2019 setup to a proper theme as their outdated Template-Pack/Template-Setup still working and they’re happy.

Is it good?

I doubt it.

Do they miss a lot of things?

Yes.

But if they’re happy with it - why force somebody into something, you know?

Last year (Q1/2025) CMS React got introduced and marketed as “the next big thing”.

Personally I believe it was done for following reasons:

  1. AI has a much easier time writing React than HubL
  2. HubSpot is build on React (it wasn’t always like this)
  3. To get more developers into HubSpot CMS development as React is “universal”. HubL is specific

But imo it’s an overkill to write more or less static modules and templates with React. For standalone pages, apps and such - definitely a huge benefit, but assets inside a CMS? I don’t really see a benefit in this.
Don’t get me wrong, I don’t want to convince you (or anyone) to stay away from React themes, as they’re a good addition for building themes, but I wouldn’t recommend to use it for clients.

Especially since React themes still got a “beta” taste and have many quirks that HubL themes don’t have.

best,

Anton

6

Thanks Anton for the detailed reply. I appreciate that little history lesson, and it probably warrants a further discussion with our team. I do agree that writing mostly static modules with react is overkill. As far as the include tag, we have (and still do have) include tags in about ~25 of the modules on our current site… So they do work on Hubl themes, but that may not be the intended use for the include tag. It was just a bit surprising to not see them working the same way during the migration. Converting to macros seems like a solid solution, and might have been the more “correct” way to do it in the first place.

7

Same issue trying to use require_css in module.
{{ require_css(get_asset_url(“../../styles/main.css”)) }} works in dev, but fails upload.
{{ require_css(get_asset_url(“@projects/cms-theme-t1/my-theme/styles/main.css”)) }} works in dev, but fails upload.

{{ require_css(get_asset_url(“@projects/cms-theme-t1/theme/my-theme/styles/main.css”)) }}

doesn’t work in dev, but validates in upload.

8

Hi @ndwilliams3,
Thank you for posting to the Community!
Tagging in Anton since they were able to provide the original suggested solution of this thread! -- @Anton, do you have any other suggestions for @ndwilliams3?
Thank you in advance!
Cassie, Community Manager

9

Hey @ndwilliams3,

when working with the get_asset_url variable with a relative path, it’s always from the theme root.
This means:

If you got a structure like

  • theme
    • styles
      • main.css
    • templates
      • layouts
        • base.html

The get_asset_url should be either

get_asset_url("./../../styles/main.css")

or

get_asset_url("theme/styles/main.css")

While it’s not recommended using hard-coded paths, it’s possible if it’s your portal and you’re not planning to create child-themes

hope this helps

best,

Anton

10

Inside template files, relative paths behave as expected, they render correctly in dev and pass upload validation.

However, inside a module, the behavior is inconsistent:

{{ require_css(get_asset_url("../../styles/main.css")) }}

  • :white_check_mark: Renders correctly in dev
  • :cross_mark: Fails upload validation

{{ require_css(get_asset_url("@projects/cms-theme-t1/my-theme/styles/main.css")) }}

  • :white_check_mark: Renders correctly in dev
  • :cross_mark: Fails upload validation

I also tested using the full project path since everything inside the src folder is uploaded /src/theme/my-theme/

{{ require_css(get_asset_url("@projects/cms-theme-t1/theme/my-theme/styles/main.css")) }}

  • :white_check_mark: Passes upload validation
  • :cross_mark: Does NOT render in dev

So right now:

  • Paths that work in dev fail validation
  • Paths that pass validation don’t work in dev

This only seems to occur within modules, templates don’t have this issue.

At this point, it looks less like a pathing issue and more like a mismatch between dev resolution and upload validation rules for project-based themes.

11

@Anton,

I also tested image and macro imports with the same dev/validation behavior

{{ get_asset_url('../../assets/images/test-icon.svg') }}
{{ get_asset_url('@projects/cms-theme-t1/my-theme/assets/images/test-icon.svg') }}
{{ get_asset_url('@projects/cms-theme-t1/theme/my-theme/assets/images/test-icon.svg') }}

{% import "../../macros/helpers.hubl.html" as helpers %}
{% import "@projects/cms-theme-t1/my-theme/macros/helpers.hubl.html" as helpers %}
{% import "@projects/cms-theme-t1/theme/my-theme/macros/helpers.hubl.html" as helpers %}