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

Question

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

jorgheymans opened this issue 6 months ago · comments

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

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.

Jorg Heymans · Answer 1 · Fri May 03 2024 23:25:20 GMT+0800 (China Standard Time)

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.

Jorg Heymans · Answer 2 · Mon May 06 2024 19:12:04 GMT+0800 (China Standard Time)

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

Jorg Heymans · Answer 3 · Mon May 06 2024 22:40:18 GMT+0800 (China Standard Time)

It can be fixed in 2 ways it seems

Add @Uses(Upload.class) on the view that uses the FileUploadHandler component
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 · Answer 4 · Wed May 08 2024 22:16:14 GMT+0800 (China Standard Time)

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.)

Jorg Heymans · Answer 5 · Thu May 09 2024 03:56:23 GMT+0800 (China Standard Time)

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 · Answer 6 · Thu May 09 2024 04:43:02 GMT+0800 (China Standard Time)

@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.

Jorg Heymans · Answer 7 · Fri May 10 2024 19:49:53 GMT+0800 (China Standard Time)

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

Matti Tahvonen · Answer 8 · Mon May 20 2024 15:44:13 GMT+0800 (China Standard Time)

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.

Matti Tahvonen · Answer 9 · Mon May 20 2024 15:44:47 GMT+0800 (China Standard Time)

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

Matti Tahvonen · Answer 10 · Mon May 20 2024 16:04:02 GMT+0800 (China Standard Time)

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.

Matti Tahvonen · Answer 11 · Mon May 20 2024 16:16:57 GMT+0800 (China Standard Time)

2.8.16 (with the fix) syncing to central currently.