Meteor 1.5 and Polymer 2.0 #24

faburem · 2017-06-23T08:59:39Z

First of all I would like to apologise for this rather unqualified bug report, but I'm really stuck and don't know if this is due to changes in Meteor 1.5 or Polymer 2.0 (or both).

Here are the steps to reproduce this:

create a new project with Meteor 1.5
meteor create --bare polymer-test
remove static-html and add synthesis
meteor remove static-html && meteor add mwc:synthesis
create a client and imports folder
mkdir client && mkdir imports
add the polymer 2.0 dependencies to bower.json inside the imports folder

{
  "dependencies": {
    "polymer": "Polymer/polymer#^2.0.0-rc.3",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.7"
  },
  "resolutions": {
    "polymer": "^2.0.0-rc.3"
  },
  "private": true
}

run bower install inside the imports folder
bower install
create a simple polymer element in the imports folder, i.e.

<link rel="import" href="bower_components/polymer/polymer-element.html">
<dom-module id="my-view1">
  <template>
    <div>
      <h1>View One</h1>
      <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
    </div>
  </template>
  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }
    }
    window.customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

create a index.html inside the client folder which utilises the element

  <body>
    <my-view1></my-view1>
  </body>

create index.js inside the client folder to import polymer dependencies and the custom element

import '/imports/bower_components/webcomponentsjs/webcomponents-loader.js'
import '/imports/bower_components/polymer/polymer.html'
import '/imports/src/my-view1.html'

run meteor and go to http://localhost:3000
meteor

In the browser console I get the following errors:

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at new DomModule (app.js?hash=8ff5241…:1191)
    at _synthesizer.render (synthesis-client.js:10)
    at eval (/imports/template.my-view1.js:16)
    at dynamic-import.js?hash=5d031ac…:135
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at require (modules-runtime.js?hash=8587d18…:238)
    at eval (/imports/my-view1.html:9)
    at dynamic-import.js?hash=5d031ac…:135
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at require (modules-runtime.js?hash=8587d18…:238)

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at MyView1.PropertyAccessors (app.js?hash=8ff5241…:5718)
    at MyView1.TemplateStamp (app.js?hash=8ff5241…:9124)
    at MyView1.PropertyEffects (app.js?hash=8ff5241…:7330)
    at MyView1.PolymerElement (app.js?hash=8ff5241…:4799)
    at new MyView1 (/imports/my-view1.js:35)
    at eval (my-view1.js:8)
    at dynamic-import.js?hash=5d031ac…:135
    at fileEvaluate (modules-runtime.js?hash=8587d18…:343)
    at Module.require (modules-runtime.js?hash=8587d18…:238)
    at getNamespace (dynamic-import.js?hash=5d031ac…:175)

Any help is greatly appreciated - maybe I'm doing something wrong?

The text was updated successfully, but these errors were encountered:

aruntk · 2017-06-23T11:30:36Z

@faburem This happens because polymer wont work in es5. Meteor is converting the es6 polymer 2 code to es5. You have to import an es5 adapter file. Check the es6 to es5 section https://www.polymer-project.org/2.0/docs/es6

A demo https://github.com/aruntk/kickstart-meteor-polymer-with-app-route/tree/2.0-preview

Imported es5-loader here. https://github.com/aruntk/kickstart-meteor-polymer-with-app-route/blob/2.0-preview/client/main.html#L7

webcomponents directory in public. https://github.com/aruntk/kickstart-meteor-polymer-with-app-route/tree/2.0-preview/public/webcomponentsjs

trusktr · 2018-01-10T07:20:34Z

The funny thing is if you include the Polymer adapter in an ES5 bundle, then the class syntax breaks the ES5 bundle. This makes things really tricky. One way to solve it is to wrap the adapter in an eval, and run it only in es6 environments, but this has drawbacks too. There's other techniques to get it to work everywhere.

Ultimately, I abandoned using it in favor of the excellent document-register-element by @WebReflection, which is much easier to get working everywhere, therefore easier to distribute. The only caveat is that you need to write an adapter class, see part in the README, but otherwise end users don't notice anything, and can use your custom elements everywhere. You'll end up getting this working in a single-bundle-everywhere much faster than with Polymer's adapter (at least that was my experience).

trusktr mentioned this issue Jan 10, 2018

Support for Custom Elements v1. meteor/meteor-feature-requests#250

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Meteor 1.5 and Polymer 2.0 #24

Meteor 1.5 and Polymer 2.0 #24

faburem commented Jun 23, 2017

aruntk commented Jun 23, 2017 •

edited

Loading

trusktr commented Jan 10, 2018 •

edited

Loading

Meteor 1.5 and Polymer 2.0 #24

Meteor 1.5 and Polymer 2.0 #24

Comments

faburem commented Jun 23, 2017

aruntk commented Jun 23, 2017 • edited Loading

trusktr commented Jan 10, 2018 • edited Loading

aruntk commented Jun 23, 2017 •

edited

Loading

trusktr commented Jan 10, 2018 •

edited

Loading