search

viritin / flow-viritin

Viritin inspired project for Vaadin Flow
Other
39 stars 15 forks source link

UploadFileHandler does not play well with font-awesome-iron-iconset #60

Closed jorgheymans closed 2 months ago

jorgheymans commented 2 months ago

We have added UploadFileHandler to our application and during development (starting Vaadin in dev mode) everything works fine. When starting the app in production mode however, the upload button is not showing. Looking at the dom inspector, the element seems present

image

We are using other viritin components in our app and they are fine. I am guessing it has something to do with the prod bundle not being regenerated correctly, but i have tried removing all generated files (package.json, .bundle, node_modules, vite*) etc and do a production rebuild without succes.

There is this appearing in the browser console when i go to the page containing the widget, so i thought to remove the UploadI18N setting on UploadFileHandler, which removes below error but the upload button is still not showing. Again, in development all is working fine, so we're a bit scratching our head.

Uncaught TypeError: this.i18n is undefined
    anonymous http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js line 3 > Function:3
    anonymous http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js line 3 > Function:3
    Q3 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Bg http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Xm http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    om http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    cb http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Jr http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    nE http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    C http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    _r http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    bb http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    I http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    X2 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    promise callback*X2 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Ky http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    _ http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Cu http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    D3 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    iy http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    _ http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    x http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    o0 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    p3 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    qg http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Qr http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    kb http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    J http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    onreadystatechange http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    sd http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    O2 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    fy http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    c1 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    K2 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    n1 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    o3 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    o1 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    M3 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    vf http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    qm http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    I http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    C http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    $f http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Gy http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    B http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    jl http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    sd http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    O2 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    fy http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    E http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    setTimeout handler*nf http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    L1 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    st http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    N1 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    ei http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    M0 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    gg http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    hw http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    I http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    db http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    x http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    eE http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    sw http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    R http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    Om http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    y http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    sd http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    O2 http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    fy http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:1
    o8 http://localhost:8080/VAADIN/build/chunk-0d4334757e8df0d9ee3fb5fd8b2a7a54419b2c7f58ee0c13e325b3bbfa6c57a9-DD-RlP_P.js:742
    R5 http://localhost:8080/VAADIN/build/chunk-0d4334757e8df0d9ee3fb5fd8b2a7a54419b2c7f58ee0c13e325b3bbfa6c57a9-DD-RlP_P.js:742
    I5 http://localhost:8080/VAADIN/build/chunk-0d4334757e8df0d9ee3fb5fd8b2a7a54419b2c7f58ee0c13e325b3bbfa6c57a9-DD-RlP_P.js:742
    T5 http://localhost:8080/VAADIN/build/chunk-0d4334757e8df0d9ee3fb5fd8b2a7a54419b2c7f58ee0c13e325b3bbfa6c57a9-DD-RlP_P.js:742
    _propertiesChanged http://localhost:8080/VAADIN/build/chunk-0d4334757e8df0d9ee3fb5fd8b2a7a54419b2c7f58ee0c13e325b3bbfa6c57a9-DD-RlP_P.js:742
    _propertiesChanged http://localhost:8080/VAADIN/build/FlowClient-BZ2ixoyw.js:3
    _flushProperties http://localhost:8080/VAADIN/build/chunk-0d4334757e8df0d9ee3fb5fd8b2a7a54419b2c7f58ee0c13e325b3bbfa6c57a9-DD-RlP_P.js:716
    _invalidateProperties http://localhost:8080/VAADIN/build/chunk-0d4334757e8df0d9ee3fb5fd8b2a7a54419b2c7f58ee0c13e325b3bbfa6c57a9-DD-RlP_P.js:742
    set http://localhost:8080/VAADIN/build/chunk-0d4334757e8df0d9ee3fb5fd8b2a7a54419b2c7f58ee0c13e325b3bbfa6c57a9-DD-RlP_P.js:716
    _onClick http://localhost:8080/VAADIN/build/chunk-0d4334757e8df0d9ee3fb5fd8b2a7a54419b2c7f58ee0c13e325b3bbfa6c57a9-DD-RlP_P.js:5973
Caused by: undefined

EDIT: adding @Uses(UploadFileHandler.class) to the view also did not help.

jorgheymans commented 2 months ago

Using https://github.com/vaadin/skeleton-starter-flow-spring, i can reproduce this by adding these dependencies:

    <dependency>
      <groupId>in.virit</groupId>
      <artifactId>viritin</artifactId>
      <version>2.8.15</version>
    </dependency>
    <dependency>
      <groupId>com.flowingcode.addons</groupId>
      <artifactId>font-awesome-iron-iconset</artifactId>
      <version>5.2.2</version>
    </dependency>

Removing the font-awesome-iron-iconset makes the upload widget appear, as by magic ! Any ideas greatly appreciated, unsure what is causing the conflict here.

jorgheymans commented 2 months ago

I have updated the description, likely the issue is on the other side but i'm leaving it open here still.

jorgheymans commented 2 months ago

It can be fixed in 2 ways it seems

  1. Add @Uses(Upload.class) on the view that uses the FileUploadHandler component
  2. Add <optimizeBundle>false</optimizeBundle> to the vaadin-maven-plugin configuration

Unsure what component is at fault, i'm investigating a bit more with Vaadin support.

gsaxena888 commented 2 months ago

I too got the same issue. @jorgheymans fix of <optimizeBundle>false</optimizeBundle> worked, though I don't know what I'm giving up (it sounds like front-end performance may be slower??); however, the @Uses(FileUpload.class) did not compile, so I tried @Uses(UploadFileHandler.class), which did compile, but it didn't work (i.e.,the "upload" button was still invisible during production mode). Thoughts @jorgheymans et al? (I too am using SpringBoot; in fact, I used Vaadin's starter kit.)

jorgheymans commented 2 months ago

Strange that @Uses(FileUpload.class) does not compile, i thought that was a standard Vaadin framework class. Are you sure you declared it on a @Route class ?

No idea on the optimizeBundle impact, it indeed does not sound all that great but at least things work :-)

javier-godoy commented 2 months ago

@jorgheymans @gsaxena888 note that the Vaadin component is com.vaadin.flow.component.upload.Upload, which has the @NpmPackage and @JsModule annotations, while UploadFileHandler only has the @Tag annotation.

jorgheymans commented 2 months ago

Right, the confusion is because of me, it should be @Uses(Upload.class) and not @Uses(FileUpload.class) !

mstahv commented 2 months ago

I guess the best way would be to add/copy @NpmPackage & @JsModule annotation to UploadFileHandler as well. Then the core's artifact could be removed altogether from the classpath (with e.g. exclude) to trim down the final artifact, without an issue.

mstahv commented 2 months ago

Pretty much all my apps use the pre-built bundle, so I havent' faced this issue.

mstahv commented 2 months ago

Verified with a simple project with forced production bundle optimization. Couldn't quickly figure out a good way to fix to current web component version, will add @Uses annotation as a temporary solution.

mstahv commented 2 months ago

2.8.16 (with the fix) syncing to central currently.