Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hydrolysis errors if using ES6 classes #35

robdodson opened this issue Jun 18, 2015 · 17 comments

Hydrolysis errors if using ES6 classes #35

robdodson opened this issue Jun 18, 2015 · 17 comments


Copy link

@robdodson robdodson commented Jun 18, 2015

I recently tried using an ES6 class for my element's definition and saw the following hydrolysis error when viewing the docs.

Failed to load source at: http://localhost:8080/components/quick-alert/quick-alert.html TypeError: Cannot read property 'forEach' of undefined
    at annotateElement (http://localhost:8080/components/hydrolysis/hydrolysis.js:1061:24)
    at Array.forEach (native)
    at Analyzer.annotate (http://localhost:8080/components/hydrolysis/hydrolysis.js:470:17)
    at http://localhost:8080/components/hydrolysis/hydrolysis.js:177:16

I'm wondering if this PR should fix the issue or if it still requires more work. cc @garlicnation

Element definition is here if you want to repro:

<link rel="import" href="../polymer/polymer.html">

An element providing a solution to no problem in particular.
@group Seed Elements
@element quick-alert
@demo demo/index.html
@hero hero.svg
<dom-module id="quick-alert">
    :host {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    .alert {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-family: Roboto, Helvetica, sans-serif;
    [hidden] {
      display: none;
    <div class="alert" hidden="{{!shown}}">

  'use strict';

  class QuickAlert {
    get is() {
      return 'quick-alert';

    get properties() {
      return {
        shown: {
          type: Boolean,
          value: false

Copy link

@cadwmaster cadwmaster commented Sep 8, 2015

Had the same error trying to fix the documentation and demo of the paper-dropdown-menu component

Copy link

@bedeoverend bedeoverend commented Oct 6, 2015

+1. Though I'm using a slightly different syntax, the one outlined in this article - I'm not sure if that makes a difference to the parser.

Copy link

@ebidel ebidel commented Oct 6, 2015

Yea, I wouldn't use the syntax in #35 (comment). get properties() is returning a new properties object on every access! Instead, properties should be setup once at registration time. The syntax in the article is 💰

Copy link

@cayblood cayblood commented Nov 17, 2015

I'm declaring properties in beforeRegister() but still seeing this error. Anyone got this working?

Copy link

@bedeoverend bedeoverend commented Nov 18, 2015

Is there any update on this? Did the ES6 PR attempt to resolve?

I'm using ES6 in all my components and would love to be able to auto-generate docs, are there any examples / docs of ES6 syntax that is supported by hydrolysis?

Copy link

@jgautheron jgautheron commented Nov 24, 2015

The ES6 PR didn't solve this issue. I have the same error as @robdodson mentioned above: Cannot read property 'forEach' of undefined which is related to the element properties not being properly parsed.

This error is only a symptom, not the source of the issue, a quick fix silences the error but still the component page won't show.

Here's the sample code which fails:

class Foo {
  beforeRegister() { = 'foo'; = {
      cover: String,
      photo: String,
      username: String

Compiling the ES6 code through Babel doesn't help at all. Still fails, for the same reason.

Copy link

@jgautheron jgautheron commented Nov 27, 2015

I fixed it in my fork.
ES6 class parsing is just not implemented, so I implemented it quickly. I would have thrown a PR, but some tests are failing for no apparent reason and it could be cleaner (a separate elementFinder for ES6 classes). If someone is willing to help...

Copy link

@efeminella efeminella commented Dec 1, 2015

Any ETA or a roadmap for when ES6 class parsing will be natively supported by Hydrolysis, perhaps a PR from @jgautheron 's fork to get this going?

Copy link

@jgautheron jgautheron commented Dec 2, 2015

Copy link

@RoXuS RoXuS commented Dec 3, 2015

Hi jgautheron,

Thx for your PR.

It seems to be not good with behavior :

get behaviors() {
    return [

The result :
capture d ecran 2015-12-03 a 09 29 49

Maybe my statement isn't good ?

Copy link

@jgautheron jgautheron commented Dec 3, 2015

You should declare them in beforeRegister with this.behaviors = [];.

Copy link

@MeTaNoV MeTaNoV commented Dec 3, 2015

and for listeners, this should work?

this.listeners = {
        "tap": "regularTap",
        "special.tap": "specialTap"
Copy link

@jgautheron jgautheron commented Dec 3, 2015

Listeners are not shown in the iron-component-page, AFAIK for now only the following are displayed:

  • properties
  • methods
  • behaviors
  • events
Copy link

@efeminella efeminella commented Jan 11, 2016

Hey guys, any traction on this yet?

Copy link

@justinfagnani justinfagnani commented Feb 11, 2016

I'm moving this bug to hydrolysis

Copy link

@mbana mbana commented May 1, 2016

Does this actually work now? If so, would someone please post an example. I've been trying to get it to work not realising it's a bug: the /demo/ and /test/ routes in polyserve work, the documentation page however doesn't.

Copy link

@justinfagnani justinfagnani commented May 2, 2016

@mbana this bug is closed. You can continue the discussion at:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet