Forums

Block CSS/JS Not Loading

Permalink
Hi

I have some custom blocks as part of a site. These blocks include custom CSS/JS files I want to include with each block so they are only loaded when required. The CSS/JS files are built using webpack and compiled to my theme directory and then I am loading them into the block via the blocks controller like so:

public function registerViewAssets($outputContent = '') 
    {
        $al = AssetList::getInstance();
        $al->register('css', 'xxx_css', 'themes/xxx/assets/css/blocks/xxx.css', []);
        $al->register('javascript', 'xxx_js', 'themes/xxx/assets/scripts/blocks/xxx.js', []);
        $this->requireAsset('css', 'xxx_css');
        $this->requireAsset('javascript', 'xxx_js');
    }


This seems to work 99% of the time but every now and then it will stop loading either one of both of the files on one block. Sometimes clearing the site cache fixes it, and sometimes it doesn't. This obviously isn't an ideal long terms solution as it means we have to keep on monitoring it closely and sometimes we just don't seem to be able to fix it.

I would really appreciate any advice on how we can resolve this. FYI we are using Concrete 8.5.4.

Many thanks
David
 
mnakalay replied on at Permalink Reply
mnakalay
Hi,

Could you tell us more. What happens when it doesn't load? Is it present in the page's markup? Is it throwing a 404 error? Anything you noticed?
What are your cache settings concerning JS and CSS?
newmoon replied on at Permalink Reply
Hi

Many thanks for your reply. When it doesn't load, there is no request to the CSS or JS file in the source code at all. Sometimes the CSS will load but not the JS, sometimes the JS but not the CSS and sometimes neither. It seems to be very random.

I have a handful of blocks all implementing the code and each one seems to experience the problem at different times.

Many thanks
David
stewblack23 replied on at Permalink Reply
stewblack23
Do you have a link to your site with the custom block and the area of the site where you custom block is installed?
newmoon replied on at Permalink Reply
Hi

I wish I could but unfortunately its not something I can share publicly.

Many thanks
David
Daniel474 replied on at Permalink Reply
I have same problem css/js block Maine to if you have any solution please reply its urgent because my office not working because the issue.

http://www.indigocard.review/
newmoon replied on at Permalink Reply
Hi again

I did some further digging on this yesterday and made an interesting discovery. I can see the approporate CSS or JS file being added to the raw HTML and there is a data attribute on it with a path to the file. However the actual src attribute is loading a cached file with a random string as the name and when I view that file, it is actually the file for a completely different module.

For some reason it seems to be loading assets from a different module. It is bizarre!

Any feedback would be greatly appreciated!

All the best
David
mnakalay replied on at Permalink Reply
mnakalay
when loading assets in c5 the code can specify whether the asset should be minified and/or concatenated with others. When it's the case, the data-src attribute gets a list of all the assets concatenated together and the src gets the URL to the concatenated file. That file is a cached file with a random string for a name.

So make sure the file you're looking for is not there somewhere. If the data-src references more than one file (and it should) then the file loaded contains all of those files. Your file's code will be somewhere in it.
newmoon replied on at Permalink Reply
Thanks, that is useful to know. There is only one file listed in the data-src though and the created file only creates the contents of one file and it is not the one requested.

Many thanks
David