Cms: SVG's don't get properly loaded when using view cache.

Created on 21 Nov 2020  Â·  12Comments  Â·  Source: statamic/cms

Bug Description

We deploy the application with caching, but one of the latest updates (presumably 99e812e6c) has broken the SVG's in the CP. One of the steps of the deployment is php artisan view:cache which pre-compiles all blade views.

How to Reproduce

  1. Install a fresh application
  2. Override the global header by copy-pasting the global header with (from top of my head: mkdir -p resources/views/vendor/statamic/partials && cp ./vendor/statamic/cms/resources/views/partials/global-header.blade.php resources/views/vendor/statamic/partials)
  3. Run php artisan view:cache and notice the broken SVG's in the CP.

Extra Detail

Screenshot 2020-11-21 at 11 39 22

Environment

Statamic 3.0.28 Pro
Laravel 7.29.3
PHP 7.4.9
No addons installed
Fresh install from statamic/statamic

bug custom

Most helpful comment

Will be in the next 3.1 alpha release.

All 12 comments

I can't seem to re-create this issue.

I ran php artisan view:cache and couldn't see a difference to how the SVG icons are being loaded. See video.

I'm running it on a fairly fresh site, only installed it today from statamic/statamic and on the latest Statamic version (v3.0.30).

I've got a couple of questions:

  • By any chance have you published any Statamic views to your resources/views directory?
  • Have you done anything custom with Statamic's routes, like override them?
  • Have you registered any of your own Blade directives or do you have any Laravel packages that could potentially be causing issues.

I have published the partials/global-header.blade.php. I have updated the original text with the extra reproduction steps.

Thanks! Looks like publishing the global header is what breaks things...

Is there any particular reason you are maintaining your own copy? For a custom logo or something?

Ah... I know why it's broken. As the views are being cached, they cant find the custom blade directive, as its being registered in the middleware which isn't helpful as the views have already been built. 🤔

The change to using a middleware instead of registering in Statamic's Service Provider (where it would have likely worked) was due to the @svg directive conflicting with other packages that also provide their own @svg directive. Ref #956

A workaround for now would be to add the directive's code to your AppServiceProvider's register method.

Blade::directive('svg', function ($expression) {
    return "<?php echo Statamic::svg({$expression}) ?>";
});

We are maintaining a copy because we want to style the control panel / auth flow in customer style. I'm aware it was moved to a middleware (see referenced commit). Not sure how you would go about tackeling this without something ugly (?) as registering it in a ServiceProvider with something along the lines of:

if (Request::is('cp/*')) {
    // register directive
}

I liked the middleware approach but that doesn't work for console obviously. Another solution could be choosing another name for the blade directive, or maybe there is another solution that I'm missing?

I think styling the CP is pretty common, maybe there would be another way to go about it to prevent bugs like this (so without publishing specific views)?

I don't even think doing something like that would work as the views don't go through the router so they don't know what the route is going to be.

I think your best bet would be to use that work around, unfortunately.

Yes you're right. The 'obvious' solution could be to simply use {{ Statamic::svg() }} instead though 🤔 . Since I published the views that could be a thing, but it's still a workaround yes.

Good find about the middleware. Didn't know this would be an issue. Good to know!

We'll probably need to replace our @svg directive with @statamic_svg or @cp_svg. Ugly, but what can you do.

This issue has not had recent activity and has been marked as stale — by me, a robot. Simply reply to keep it open and send me away. If you do nothing, I will close it in a week. I have no feelings, so whatever you do is fine by me.

💨 🤖

Will be in the next 3.1 alpha release.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AndreasSchantl picture AndreasSchantl  Â·  3Comments

mattrothenberg picture mattrothenberg  Â·  3Comments

robdekort picture robdekort  Â·  3Comments

aerni picture aerni  Â·  3Comments

jimblue picture jimblue  Â·  3Comments