Asset paths in child theme give warnings

[CMcNamee]

I’m having trouble with asset paths in my child theme.

I’ve created a child theme of maka_Agency POWER THEME. I’ve copied templates/layouts/base.html to my child theme in order to customize. However, in the child theme base.html, all of the paths give the warning “…there is no resource at path…” I can confirm that the parent theme has this file. And, I’ve even tried referencing it directly to the parent theme, which resulted in a different warning of “using asset outside current theme”. What is the correct way to handle these inherited paths so that they work properly in a child theme? My 1st screenshot is of one of these paths in base.html in the child theme, and the 2nd screenshot is showing the asset does in fact exist in the parent theme. All of the paths being required or included as partials or modules are giving the same warnings in the child theme.

What can I do to fix this?

[Anton]

Hi @CMcNamee,

have you checked the “How to start using Child-themes guide” out?

best,

Anton

[CMcNamee]

Here is another screenshot, showing other “not found” warnings. And, it’s not just the linter complaining… the assets don’t actually load on a page when I use the template to generate a page.

[dennisedson]

@CMcNamee

When you created the child theme, did you copy over the theme.json file and add the extends key value pair?

“extends”: “@marketplace/xxx/xxx”,

You can see a blog post of it here

[CMcNamee]

Yes, I have.

There is no information on that page about asset paths within a child theme. Which, is why I’m asking here.

[CMcNamee]

The way that I created the child theme was in the Design Manager, by right-clicking on the parent theme and then click “create child theme”. This created the theme.json file for me in the child theme, but, upon inspection, it did not have the “extends” key value pair in there. So, I added it. It looks like many of the warnings have disappeared, and more elements have loaded on the pages using the child theme. But, there’s still something not quite right. In the case of trying to require the pwr.js file (see screenshot in my previous reply), the pwr.js file is still not actually getting included on a page created with that template in the child theme.

I thought the simplest solution to skate around the problem, would maybe be to copy pwr.js from the parent theme to the child theme, but for one, that should not be necessary because we don’t need to customize it. And two, having to do that kind of negates the purpose of a child theme. I have actually tried it though, and it resulted in a Warning about failed minification due to unexpected token operator (I’ve attached a screenshot of this). This same file in the same location in the parent theme does NOT produce any Warning about failed minification. Maybe these are clues as to why pwr.js will not load in the child theme?

[dennisedson]

@CMcNamee

I am slightly supsicious of the initial child theme creation. It should have automatically created that extends line in your json file Wonder if something when amiss. Would you be willing to try to create a child theme again from this same theme and see if that resolves this issue?

If not, I will do some testing and alert the team if needed

[CMcNamee]

I created the child theme in Design Manager by right-clicking on the parent theme and selecting “create child theme”. So, hubspot automatically created a theme.json file. It appears that it did not have the extends line in there, so I added it it. This is the current contents of that file:

{
 "label" : "POWER THEME Pro - CHILD Theme",
 "extends" : "@marketplace/maka_Agency/POWER THEME",
 "preview_path" : "./templates/setup-guide.html",
 "screenshot_path" : "./images/template-previews/pwr-img_template-preview_theme.jpg",
 "enable_domain_stylesheets" : false,
 "is_available_for_new_content" : true,
 "responsive_breakpoints" : [ {
 "name" : "mobile",
 "previewWidth" : {
 "value" : 520,
 "units" : "px"
 },
 "mediaQuery" : "@media (max-width: 767px)"
 } ],
 "version" : "20",
 "author" : {
 "name" : "maka Agency",
 "email" : "support@maka-agency.com",
 "url" : "https://www.maka-agency.com/"
 },
 "documentation_url" : "https://www.maka-agency.com/power-theme-documentation/",
 "example_url" : "https://www.maka-agency.com/power-theme"
}

I tried a template from the child theme on a page and many of the warnings have disappeared. So, it seems that the linter is happy now. But, some of those assets are still not loading when the template is used on a page.

The pwr.js file, for example, no longer has the linter warning on it, but it is still not being included in the page. I’ve even tried copying pwr.js to my child theme (even though we have no custom changes for it, so this kinda negates the benefit of having a child theme) and then the linter gives warnings within the pwr.js file in the child theme (see attached screenshot) even though the exact same file in the parent theme has no lint warnings. Such a strange issue. Any idea why it would be behaving like this, and how to remedy it?

[CMcNamee]

This issue is resolved. I was contacted by the POWER theme developer who went through some troubleshooting steps with me. That they were very nice and very helpful, excellent customer service. As it turns out, because I made the child theme from the marketplace theme, and not from the previous copy of the theme that we had made modifications to and settings on, there were theme settings and whatnot that were not copied over. Apparently the child theme takes the theme settings of the parent automatically, but, if the parent isn’t the marketplace theme then they need to be manually copied over. It was definitely not a fault of the power theme or hubspot’s child theming process. I am in the slightly tedious process of copying over those settings manually from the previous theme and now the child theme is coming together nicely.

[dennisedson]

Thanks for adding the solution here @CMcNamee !

And thank you @erg1000 and the team at the Maka Agency for helping to resolve this!