GoogleWebComponents / google-map

Google Maps web components

Home Page:https://elements.polymer-project.org/elements/google-map

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

babel({ presets: ['es2015']})) breaks google-map

ZepAviator opened this issue · comments

I am using the Polymer framework, and specifically the polymer-build toolchain.

bower.json entry is:

"dependencies": {
  "google-map": "GoogleWebComponents/google-map#^1.2.0"
}

We are using these npm versions to compile from ES6

    "babel-core": "^6.23.1",
    "babel-eslint": "^7.1.1",
    "babel-preset-es2015": "^6.22.0",

In the gulp process, I have this:

.pipe(polymerProject.splitHtml())
.pipe(gulpif(/(?!\.min)[\w]{4}\.js$/, babel({ presets: ['es2015']})))
.pipe(gulpif(/(?!\.min)[\w]{4}\.js$/, uglify()))  // .pipe(gulpif(/\.js$/, uglify()))
.pipe(gulpif(/\.css$/, cssSlam()))
.pipe(gulpif(/\.html$/, htmlMinifier({collapseWhitespace: true, removeComments: true})))
.pipe(polymerProject.rejoinHtml())

All works, but the babel compiling down will result with the following error:

Uncaught TypeError: Cannot set property markers of #<google-map> which has only a getter
    at HTMLElement._updateMarkers (google-map.html:13)
    at HTMLElement._initGMap (google-map.html:13)
    at HTMLElement.attached (google-map.html:13)
    at polymer-micro.html:1
    at Object.whenReady (polymer-micro.html:1)
    at HTMLElement.attachedCallback (polymer-micro.html:1)
    at HTMLElement.attachedCallback (polymer-mini.html:1)
    at HTMLElement._finishDistribute (polymer-mini.html:2)
    at HTMLElement._readyClients (polymer-mini.html:1)
    at HTMLElement._ready (polymer-mini.html:1)
_updateMarkers @ google-map.html:13
_initGMap @ google-map.html:13
attached @ google-map.html:13
(anonymous) @ polymer-micro.html:1
whenReady @ polymer-micro.html:1
attachedCallback @ polymer-micro.html:1
attachedCallback @ polymer-mini.html:1
_finishDistribute @ polymer-mini.html:2
_readyClients @ polymer-mini.html:1
_ready @ polymer-mini.html:1
_tryReady @ polymer-mini.html:1
_initFeatures @ polymer.html:3
__initialize @ polymer-micro.html:1
createdCallback @ polymer-micro.html:1
window.Polymer @ polymer-micro.html:1
(anonymous) @ property-detail.html:37

I have to do further testing, but it might be that this is a Vulcanize issue and might be fine with polymer-build 0.8.0.

Found the issue. Line 557 of google-map.html:
this.markers = this._setMarkers(newMarkers);

markers is a readOnly property and thus has no setter. For some reason Polymer 1.0 without ES6 babel compiling has no issue with it. After running Polymer through babel though, this is an error.

It should be an error regardless. What does work is changing the line to :
this._setMarkers(newMarkers);

Fixed with PR #354

Until it's merged, if someone else runs across the same issue, I'll keep this branch updated with master:
https://github.com/ZepAviator/google-map/tree/markers_no_setter_fix