Troubleshooting ​

CSS components ​

  • Icons and/or Pictograms are not loading

    Make sure to import the */Icons.css and or the */Pictograms.css files of @zurich/design-tokens, or importing just the ones you require for the current page.

Web components ​

  • I'm passing the relative route of my image to the component and this one is not loading.

    We strongly recommend to avoid relative paths with assets or routes (starting with ./ or ../). There are practical reasons for this is terms of maintainability and error catching, but also to avoid issues with references when passing references around.

    If you're using the CDN, the components are rendered in the client and the class of the component is hosted under https://zds.zurich.com/@zurich/web-components/, so when you pass an image-src as ../../my-image.png, this one is searched under https://zds.zurich.com/. A really easy way of checking this, is that if you pass ../../sample.webp, the docs sample image will be loaded.

    Make sure you use absolute paths (ex.: https://my-site.com/public/<path>) to avoid this problem when you're using the WebComponents from the CDN or root paths (ex.: /public/<path>) for local projects, relying in this last case on good practices of the corresponding bundler (Vite, Webpack, Turbopack, etc.).

  • The model-based (Modal, Select, etc.) component is not working properly.

    Make sure you are handling the component externally the right way, providing a two-way data biding with the value and receiving and changing the injected value in the controller using the corresponding event (depends on the framework used). All the WebComponents are designed to handle their own states internally, but if the control is taken by a parent element or component, the full control loop must be closed to avoid problems or inconsistencies.

    Example:

    tsx
    import { useState } from 'react';

import { ZrSelect } from '@zurich/web-components/react';
import type { ZSelect_Props } from '@zurich/dev-utils/code';

export default function Select() {
  const [value, setValue] = useState<string | undefined>(undefined);

  const options: ZSelect_Props<string>['options'] = [
    { text: 'Option A', value: 'a' },
    { text: 'Option B', value: 'b' },
    { text: 'Option C', value: 'c' },
  ];

  return (
    <>
      {/* Uncontrolled */}
      <ZrSelect label="Select" options={options} /> 

      {/* Controlled */}
      <ZrSelect
        value={value}
        label="Select"
        options={options}
        onChange={setValue}
      />
    </>
  );
}

CMS and Platforms ​

  • I need to use a custom component of the CMS/Platform for having an "editor experience".

    Since we provide two different paradigms for most of the components, when you create the wrapper for your CMS/Platform you can switch between an "editor" version of the component or a render one. This "editor" version can be implemented with the CSS version of the component, since it allows to have a more flexible version of it, that can include the provided "contenteditable" component inside.

    The other option is to use the native "editable" feature of the WebComponents and the listening to the corresponding events emitted by the component as CustomEvent of type edit with the filedName of the content and the new value in the detail.

    In both cases, we strongly recommend to separate the SSR of the component between the "editor" version and the serving one for a better performance and avoiding problems.

.NET ​

  • Refused to load the image '<URL>' because violates the following Content Security Policy directive: "img-src 'self' data"

    Make sure that your web.config file has this config setup:

    xml
    <configuration>
  <httpProtocol>
    <customHeaders>
      <add
        name="Content-Security-Policy"
        value="default-src 'self'; font-src *.zurich.com 'self' data: img-src *.zurich.com 'self' data:"
      />
    </customHeaders>
  </httpProtocol>
</configuration>