vaadin/multiplatform-runtime

Legacy components are not attached to view after adding font-awesome-iron-iconset add-on

onuridrisoglu opened this issue · 7 comments

In V14 application using MPR, legacy components are not attached to view after adding the font-awesome-iron-iconset add-on dependency. Here is a very simple reproducible example.

I tried both with mpr-v8 and mpr-v7, and the same problem exists in both versions.
If you run the application in production mode, or build the frontend even in development mode, it works fine.

  • Versions:
    • Vaadin Framework: 14.8.20
    • Flow: 2.7.6
    • MPR: 2.2.10
    • Java JRE / JDK : 1.8
    • Operating System: Mac OS
    • Browser (if applicable): Chrome Version 109.0.5414.119

A quick note (maybe not relevant to the issue): Flow 2.8 corresponds to Vaadin 14.9, but you use 14.8. Can you please try with 14.9?

You're right, I changed it 2.7.6 and also updated it in the demo project. But the issue still remains

The issue was triaged and currently added to the backlog priority queue for further investigation.

The issue is the <g id="vaadin"> in fab.js which overrides the window.vaadin scope in the browser where the Framework bootsrap /framework/VAADIN/vaadinBootstrap.js sets the initApplication function [window.vaadin = window.vaadin || { initApplication: function(appId, config) .... ]
This doesn't work as window.vaadin returns the <g id="vaadin"> item and the framework intialization is never done as the initApplication is never added to the page.
To fix this the font-awesome-iron-iconset should rename the VAADIN icon to VAADIN_ICON in FontAwesome.java and vaadin-icon in fab.js

@caalador Thanks for the detailed analysis. I've created an issue for renaming the VAADIN icon in font-awesome-iron-iconset.

@onuridrisoglu can we close this issue, as it seems, the problem has been fixed in font-awesome-iron-iconset?

Issue has been fixed in version 3.1.0 of font-awesome-iron-iconset. As suggested by @caalador the icon has been renamed as vaadin-icon. For compatibility, FontAwesome.Brands.VAADIN also resolves to "vaadin-icon" (thus it does not contribute a <g id="vaadin"> element).
image