google-map icon indicating copy to clipboard operation
google-map copied to clipboard

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

Open ZepAviator opened this issue 8 years ago • 3 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

ZepAviator avatar Feb 16 '17 01:02 ZepAviator

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.

ZepAviator avatar Feb 16 '17 04:02 ZepAviator

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

ZepAviator avatar Feb 17 '17 00:02 ZepAviator

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

ZepAviator avatar Feb 17 '17 17:02 ZepAviator