Polymer/polymer-starter-kit

Polymer 2.0 class syntax throws error in polymer-starter-kit-2.1.2

Closed this issue · 11 comments

seanzhou321 commented

Description

Polymer-starter-kit-2.1.2 is still using polymer 1.x syntax and failed on class definition with Polymer 2.0 syntax.

When I follow the tutorial https://www.polymer-project.org/2.0/start/toolbox/create-a-page, the new browser failed at
class MyNewView extends Polymer.Element
With error on .Element, "Uncaught TypeError: Class extends value undefined is not a constructor or null"

Expected outcome

new-view tab should show a link in the left panel and the center panel should show new-view if the user clickes on the link on the left panel.

Actual outcome

The newly added UI element does not show in both Chrome and IE11.

Steps to reproduce

  1. Follow the instruction in the steps to create a new page.
  2. In script section, you will see that new element class is created by extending Polymer.Element, which is version 2.0 syntax. However, it is not working
  3. Exam other views, new classes are created by calling Polymer({}).

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10
seanzhou321 commented

In bower.json, it called polymer#^1.6.0. Request to upgrade using Polymer 2.0. I would like to start using 2.x version.

robdodson commented

Polymer 2 is not released yet. When it is available we'll convert the generator to use it

ankitkante commented

Hi
I am using Polymer 2.0. When I compile my code to ES5 and run it in an old browser(Chrome 48), I get errors Class extends value undefined is not a function or null for the line class MyApp extends Polymer.Element.
I am using polymer 2.0 syntax as mentioned in the docs. The funny thing is that in the same browser polymer serve works with the compiled code.

robdodson commented

Chrome 48 is pretty old :) Just curious, why do you need to use it with that version of Chrome?

ankitkante commented

Hi, Thank you for replying.
The polymer document said that Webcomponents are supported on Chrome 49+. We are trying to support ES5 browsers also.
So, we created 2 build: ES5 & ES6. Now, ES6 build worked fine on the latest Chrome(v59). But, to test the ES5 build, I installed Chrome 48.When trying the ES5 build on Chrome 48, I got the previously mentioned error.

web-padawan commented

Good catch about different Chrome versions support. AFAIK some users being stuck to Win XP are only able to use Chrome 49 or earlier. I wonder if we could have some tool like nvm to switch between versions for testing purpose.

robdodson commented

@ankitkante did you include the custom-elements-es5-adapter.js before the polyfills?

ankitkante commented

When I run polymer build, the custom-elements-es5-adapter.js is automatically included in my index.html file

robdodson commented

I haven't seen the Class extends value undefined error before. @justinfagnani have you seen this? @ankitkante silly question but do you have polymer-element.html imported?

ankitkante commented

Yes.polymer.element.html is imported in my-app.html. Should I import it in all the files that define my custom-elements?

Soesah commented

I have this issue too. Importing polymer-element.html in all my custom elements doesn't help. What I am seeing is that my custom elements are loaded before the element-mixin.html, which does the actual setup for Polymer.Element and apparently. I was able to 'fix' this, momentarily, by only importing polymer-element.html in my top custom element, and not in the child, but adding a second child import just causes this issue again.