Tools: Error when using class properties

[fernandopasik]

I wanted to use class properties like the static styles from lit-element. I serve my app with polymer cli and it's throwing the following error.

Error { SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (16:16)
    at Parser.raise (/project/node_modules/babylon/lib/index.js:776:15)
    at Parser.expectPlugin (/project/node_modules/babylon/lib/index.js:2084:18)
    at Parser.parseClassProperty (/project/node_modules/babylon/lib/index.js:4920:12)
    at Parser.pushClassProperty (/project/node_modules/babylon/lib/index.js:4884:30)
    at Parser.parseClassMemberWithIsStatic (/project/node_modules/babylon/lib/index.js:4817:14)
    at Parser.parseClassMember (/project/node_modules/babylon/lib/index.js:4754:10)
    at Parser.parseClassBody (/project/node_modules/babylon/lib/index.js:4709:12)
    at Parser.parseClass (/project/node_modules/babylon/lib/index.js:4659:10)
    at Parser.parseExportDefaultExpression (/project/node_modules/babylon/lib/index.js:5018:19)
    at Parser.parseExport (/project/node_modules/babylon/lib/index.js:4983:31)
  pos: 458,
  loc: Position { line: 16, column: 16 },
  missingPlugin: [ 'classProperties' ] }`

I think that the babel config that polyserve uses must be missing this plugin.

[fernandopasik]

Would this file be missing here the classProperties plugin?

https://github.com/Polymer/tools/blob/dc391830fec747bb6164109157cd3a24302e346a/packages/analyzer/src/javascript/javascript-parser.ts#L34-L42

[busynest]

I got the same error. whats up with this? pwa with polymer-cli

[richardlyc]

defining static variables is the wrong syntax in ES6 and ES5
direct use class.properties is fine,
declaring a property in a class, compile will give an error

[kendallvision]

To expand on richardlyc's comment - I had the same error when not using Typescript. So I changed:

static styles = css...

to

static get styles() { return css...

and it worked great.

[fernandopasik]

defining static variables is the wrong syntax in ES6 and ES5
direct use class.properties is fine,
declaring a property in a class, compile will give an error

That was my point, it is not an error and it should be enabled in the config there.

[fernandopasik]

To expand on richardlyc's comment - I had the same error when not using Typescript. So I changed:

static styles = css...

to

static get styles() { return css...

and it worked great.

The reason I opened the issue is so they enable class properties in polyserve

[kendallvision]

To expand on richardlyc's comment - I had the same error when not using Typescript. So I changed:

static styles = css...

to

static get styles() { return css...

and it worked great.

The reason I opened the issue is so they enable class properties in polyserve

Certainly, I agree. I included this information since a search on the problem brought me here. Until it is resolved I hoped it might help someone down the line with the problem.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.