Problem with Polymer 3 include

I have created a new Polymer 3 wrapper for an existing Javascript Library called muuri (muuri.js). Then I created a new Polymer Template project and included the javascript files in the appropriate resources directory. However the Polymer javascript file (muuri-layout.js) includes a reference to the muuri.js which has been tested and works as expected, when running “polymer serve --open”

When I run the template demo I can see that my polymer code is included in the dom, but an error is thrown that Muuri is not defined. This leads me to believe that the muuri.js file isnt being loaded for some reason.

Any help? My existing code is below…I have also included my existing project as an attachment. Thanks everyone!

MuuriLayout.java

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.html.Div;

@Tag("muuri-layout")
@JsModule("./muuri-layout.js")
//@NpmPackage(value = "@polymer/muuri-layout", version = "^3.0.1")
/*
 If you wish to include your own JS modules in the add-on jar, add the module
 files to './src/main/resources/META-INF/resources/frontend' and insert an
 annotation @JsModule("./my-module.js") here.
*/
public class MuuriLayout extends Component {

    public MuuriLayout() {
        
    }
    
    /**
     * Creates the muuri item wrappers for the components
     * @param component
     * @return 
     */
    public Component addComponent(Component component){
        
        //create the outer div
        Div item = new Div();
        item.addClassName("item");
        //create the inner div
        Div itemContent = new Div();
        item.addClassName("item-content");
        //add the content to item
        item.add(itemContent);
        
       //add the component to the wrapper 
       itemContent.add(component);
       
       return item;
    }

}

muuri-layout.js

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
import './muuri.js';
/**
 * `muuri-layout`
 * a wrapper for the muuri javascript library
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */
class MuuriLayout extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
            position: relative;
            width: 100%;
        }
      </style>
        
      <slot id="slot"></slot>
    `;
  }
  
  static get properties() {
    return {
      class: {
        reflectToAttribute: true,
        value: 'grid',
      },
    };
  }
  
  init(){
      this.raw = new Muuri(this, {
            showDuration: 2000
        });
      console.log('init called!');
      afterNextRender(this, function () {
            //this.layout();
        });
  }
  
  connectedCallback() {
    super.connectedCallback();
    this.init();
    console.log('muuri-layout created!');
  }
  
  addItemToGrid(){
    //create the wrapping element
    var newElement = document.createElement("div");
    newElement.classList.add("item");
    //create the inner element
    var innerElement = document.createElement("div");
    innerElement.classList.add("item-content");
    
    innerElement.appendChild(this.createNewThing("New Node"));
    
    newElement.appendChild(innerElement);
   
    var element =this.raw.getElement();
    element.appendChild(newElement);
  
    this.raw.add(newElement);
    this.raw.show(newElement);
    }
  
  createNewThing(text){
      var newElement = document.createElement("div");
      newElement.innerHTML = text;
      return newElement;
  }
}

window.customElements.define('muuri-layout', MuuriLayout);

Got the attachment working below…

Here we go…this is my current project
17859086.zip (381 KB)

Hi,

Sorry for the late answer.

You can try this:
window.Muuri = require(“./muuri.js”); instead of import ‘./muuri.js’; in your js file.

You can also (if you want to get rid of the muuri.js local file)

Add this, in your layout:


@Tag("muuri-layout")
@NpmPackage(value = "muuri", version = "0.8.0")
@JsModule("./muuri-layout.js")

Then in muuri-layout.js:


import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
//import './muuri.js';

window.Muuri = require("muuri");

Just what I needed, worked a treat, thank you!

Jean-Christophe Gueriaud:
Hi,

Sorry for the last answer.

You can try this:
window.Muuri = require(“./muuri.js”); instead of import ‘./muuri.js’; in your js file.

You can also (if you want to get rid of the muuri.js local file)

Add this, in your layout:


@Tag("muuri-layout")
@NpmPackage(value = "muuri", version = "0.8.0")
@JsModule("./muuri-layout.js")

Then in muuri-layout.js:


import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
//import './muuri.js';

window.Muuri = require("muuri");

Just what I needed, worked a treat, thank you!

I’ve switched to Vue.js and am blown away at how far behind Polymer is compared to Vue in all respects - community support, available extensions etc, etc! It’s really sad as Polymer is the only real flagship that could promote the uptake of the awesome Web Components features of the platform by the community but it has just dragged along despite cries of desperation from the community for it to become a thing. In terms of complexity to Angular, React and Vue, Polymer is actually not that complex but it still lags in so many ways. What a shame but good luck anyway! [KFC Survey]
(https://mykfcexperience.website/)

carld nic:
I’ve switched to Vue.js and am blown away at how far behind Polymer is compared to Vue in all respects - community support, available extensions etc, etc! It’s really sad as Polymer is the only real flagship that could promote the uptake of the awesome Web Components features of the platform by the community but it has just dragged along despite cries of desperation from the community for it to become a thing. In terms of complexity to Angular, React and Vue, Polymer is actually not that complex but it still lags in so many ways. What a shame but good luck anyway!)

please take into account the fact that unlike Vue.js, Polymer is not a JS framework by itself, and it has lots of limitations definitely worth writing a series of blog posts. I hope I’ll be able to cover it in the future once I have enough time.