Javascript component has no error but not showing

Hi, I’m really stuck and need some help. I’m trying to add Jspreadsheet javascript component to a blank screen. I followed the “jcomponent” example from the documentation. There is no error but the spreadsheet is just not showing up.

I am attaching a sample project. Could someone take a look or provide some advice on how to debug it? There is hardly any logic involved. No entity association. Just a spreadsheet with one method.

I put the javascript files in VAADIN/webjars. It seems this is working because if I move them or rename them I get an error.

I created SpreadsheetState, SpreadsheetServerComponent and spreadsheet-connector.js. I put the spreadsheet on the TestSpreadsheet screen.

jscomponent.zip (405.4 KB)

Hello!

Your component is fine but you should add jquery to your WebJarResource annotation:

@WebJarResource(value = {
        "jquery:jquery.min.js",
        "jspreadsheet:jspreadsheet.js",
        "jspreadsheet:jspreadsheet.css",
        "jspreadsheet:jsuites.js",
        "jspreadsheet:jsuites.css"}, overridePath = "jspreadsheet")

If you opened the DevTools console, you would see the error (ReferenceError) : $ is not defined.

Thank you so much. I don’t think I could have made that conneciton.