Hi Somehow the component doesn't work for me. I'm getting an error: ``` jav

Directory BubbleDialog component for Vaadin Flow 14.
1

Hi
Somehow the component doesn’t work for me. I’m getting an error:

java.lang.IllegalStateException: 
  There is no element with id='bubble' in the template file
  './bubbledialog/bubble-dialog.js'.
  Cannot map it using @Id

It happens when calling the constructor

this.bubbleDialog = new BubbleDialog(target, layout);

I don’t follow, the js file is in bubbledialog-1.0.4.jar under
/META-INF/resources/frontend/bubbledialog/bubble-dialog.js
bubbledialog-1.0.4.jar is present in WEB-INF/lib
The template with bubble-dialog.js starts with a <div id=“bubble”
I’m using Vaadin 18.0.2 on Java 11. I’m kinda lost here, bubble-dialog is the first and only component I have had in my project giving this error.
I hope anyone has seen & solved this.

2

I debugged deep into Vaadin’s Polymer parser and found a problem in your bubble-dialog.js.
You had

    static get template() {
        return html `

instead of

	static get template() {
        return html`

A space in between html and `, you savage!!!
No, apparently the current Vaadin version has a regex to recoginize whether the js contains a Polymer or Lit template.

get[\s]
*template\(\)[\s]
*\{[\s]
*return[\s]
*html([\`\'\"]
)([\s\S]
*)\1;[\s]
*\}

It’s not expecting this space.

3

Great! Thanks. I will fix it now.