Greyed-out component in Canvas when Twig has render errors - no visible explanation

Hi @Wim, indeed nice to see you again in the issue queue 😊.

The issue I had was on the environment with the following component (I've changed the component name for simplicity):

test.component.yml:

'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: Test
props:
  type: object
  properties:
    image:
      title: Image
      $ref: json-schema-definitions://canvas.module/image
      type: object

And the template:

test.twig:

{% include 'canvas:image' with image %}

For some reason, on my local environment for the client project the component is greyed-out and when I hover over it then just nothing happens (tested on latest versions of Canvas - both 1.1.0 and 1.1.1). However, when I tried to reproduce the same issue (now that you mentioned you can not reproduce it) on another environment (drupal cms from scratch using ddev) and when I hover over the same component the tooltip comes up saying that there's a render error and I should check the logs:

I'm a bit confused as to what did we do wrong on the client project so that the tooltip does not appear. We didn't hack Canvas, I promise! 😄

I'll continue the investigation and update the issue when the mistery is solved.

Alright, we managed to identify the cause of the issue on our side and wanted to share it here in case it helps others.

The problem turned out to be related to Content Security Policy (CSP) configuration. In our setup we had a fairly strict policy, specifically:

frame-src 'self';

Because of this, the component preview popup in the Canvas sidebar (shown when hovering over components) did not appear. After investigating further, we noticed that Canvas renders the preview inside an iframe generated from a blob: URL. Since our CSP only allowed self, the iframe was being blocked by the browser.

Adding blob: to the frame-src directive resolved the issue:

frame-src 'self' blob:;

Once this was added, the preview popups started working correctly.

I wonder is there any recommended CSP configuration for Canvas to ensure that all of its UI features work correctly? If not, it might be useful to convert this issue (or a follow-up) into documentation describing the minimum CSP directives required for Canvas, since many sites using Canvas are likely to run with stricter CSP policies.

That's great news, thank you @bnjmnm.