Get Cannot read properties of undefined (reading 'type') from kendo-theme-default/dist/all.css

[CC]

Hi,

When I build, I got following message. I use Angular 13.3 and typescript 4.6.2. Is there a way to remove these message? 

  .k-input-label:dir(rtl) -> unmatched pseudo-class :dir
  .k-form .k-form-fieldset>*.k-hidden+:not(.k-hidden) -> Cannot read properties of undefined (reading 'type')      
  .k-form>*.k-hidden+:not(.k-hidden) -> Cannot read properties of undefined (reading 'type')
  .k-rpanel-left+* -> Cannot read properties of undefined (reading 'type')
  .k-rpanel-right+* -> Cannot read properties of undefined (reading 'type')
  .k-chat .k-message-list-content>*+* -> Cannot read properties of undefined (reading 'type')

Thank you.

[Stoyan]

Hi,

Thanks for the provided information.

Before answering the questions, I'm gonna assume, and correct me if I'm wrong, that the errors are coming from a validation tooling that is used when building the project, as I've build a project which doesn't pop the mentioned errors.

Im gonna break the question into two parts:

1) The first .k-input-label:dir(rtl) -> unmatched pseudo-class :dir is because the :dir pseudo selector is not supported in the Chrome browser. This can be seen at the following link: https://caniuse.com/css-dir-pseudo

2) As for the rest of the error messages:

 .k-form .k-form-fieldset>*.k-hidden+:not(.k-hidden) -> Cannot read properties of undefined (reading 'type')      
  .k-form>*.k-hidden+:not(.k-hidden) -> Cannot read properties of undefined (reading 'type')
  .k-rpanel-left+* -> Cannot read properties of undefined (reading 'type')
  .k-rpanel-right+* -> Cannot read properties of undefined (reading 'type')
  .k-chat .k-message-list-content>*+* -> Cannot read properties of undefined (reading 'type')

As the Kendo Themes are implemented for  jQuery, Angular, React and Vue - these messages are popping, as these CSS styles are not meant for the Angular suite and thus the reason why the aforementioned validation tooling cannot find them.

I hope this information helps. Let me know if any other questions come to mind. 

Regards,
Stoyan
Progress Telerik

[Suyash]

Hi, 

The explanation above seems good, but what will be the best way to fix this in Angular 12.

[Christoph]

Hi,

I would also like to know how to fix this (in my case Angular 13). Avoiding the styles is not the solution because I already do not use those styles (net explicitly anyways).

Thanks,

Christoph

[Stoyan]

Hi Christoph,

Starting with the dir - if there is a tool based on CSS selectors against a browser and that browser is not Firefox, considering the selector is not supported in Chrome, its normal that no matches are found. More information about the topic can be found in our Kendo Themes repo here:

https://github.com/telerik/kendo-themes/issues/2728#issuecomment-908079705

As for the other CSS warnings - this cannot be avoided because, as stated in the previous comment, the Kendo Theme supports not only Angular but React, jQuery and Vue, which follows in some of the frameworks to not use all of the CSS classes as there may be some classes specific to the respective framework.

As a side note - these messages are only warnings and will not interfere with the build process of an Application.

I hope this helps.

Regards,
Stoyan
Progress Telerik

[Usama]

Hi,

These warnings only appear while doing the production build. While on runtime no such warnings appear. Can you please suggest some solution to avoid these warnings?

Thanks