Meteor 1.5 and Polymer 2.0

faburem commented 7 years ago

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?

aruntk commented 7 years ago

@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 commented 6 years ago

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

meteorwebcomponents / synthesis

Meteor 1.5 and Polymer 2.0 #24