oops, something went wrong! error on export mode through external button.

[rulight]

I get the following error:

bundle.js:1 oops, something went wrong! Event bubbles : false cancelBubble : false cancelable : false composed : false currentTarget : null defaultPrevented : false eventPhase : 0 isTrusted : true path : [img] returnValue : true srcElement : null target : null timeStamp : 28068.399999989197 type : "error" proto : Event

I'm using leaflet 1.3.1 and bundle.js from your main branch.

My code is this: var mapSizeOption = { width: mapsize.x+700, height: mapsize.y+500, className: 'a3CssClass', tooltip: 'Export map' }

var saver = L.easyPrint({ tileLayer: bingLayer,//currentBase, sizeModes: [mapSizeOption], filename: 'MAP', exportOnly: true, title: 'Export map', position: 'topleft', hideControlContainer: true, tileWait: 1500, hidden:true, hideClasses: ['div'] }).addTo(mymap);

*************** styles *** .easyPrintHolder .a3CssClass { background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ0NC44MzMgNDQ0LjgzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDQ0LjgzMyA0NDQuODMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNTUuMjUsNDQ0LjgzM2gzMzQuMzMzYzkuMzUsMCwxNy03LjY1LDE3LTE3VjEzOS4xMTdjMC00LjgxNy0xLjk4My05LjM1LTUuMzgzLTEyLjQ2N0wyNjkuNzMzLDQuNTMzICAgIEMyNjYuNjE3LDEuNywyNjIuMzY3LDAsMjU4LjExNywwSDU1LjI1Yy05LjM1LDAtMTcsNy42NS0xNywxN3Y0MTAuODMzQzM4LjI1LDQzNy4xODMsNDUuOSw0NDQuODMzLDU1LjI1LDQ0NC44MzN6ICAgICBNMzcyLjU4MywxNDYuNDgzdjAuODVIMjU2LjQxN3YtMTA4LjhMMzcyLjU4MywxNDYuNDgzeiBNNzIuMjUsMzRoMTUwLjE2N3YxMzAuMzMzYzAsOS4zNSw3LjY1LDE3LDE3LDE3aDEzMy4xNjd2MjI5LjVINzIuMjVWMzR6ICAgICIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=); transform: rotate(-90deg); }

************** event call ************** saver.printMap('mapSizeOption', 'MAP');

Thanks in advance for your help.

[ssontag55]

I'm seeing this too

[Hatteron]

And I'm seeing this too, Laflet Version 1.3.1 Error Text: bundle.js?fdae:1 oops, something went wrong! Event {isTrusted: true, type: "error", target: img, currentTarget: img, eventPhase: 2, …} (anonymous) @ bundle.js?fdae:1 Promise.catch (async) _createImagePlaceholder @ bundle.js?fdae:1 printMap @ bundle.js?fdae:1 handler @ leaflet-src.js?e11e:2280

[jmgoc76]

Hi!!

I get the same message:

bundle.js:1 Error while reading CSS rules from http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules bundle.js:1 Error while reading CSS rules from http://fonts.googleapis.com/css?family=Lato SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules bundle.js:1 oops, something went wrong! Event {isTrusted: true, type: "error", target: img.leaflet-tile, currentTarget: img.leaflet-tile, eventPhase: 2, …}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0isTrusted: truepath: Array(6)0: img.leaflet-tile1: div.leaflet-tile-container.leaflet-zoom-animated2: div.leaflet-layer.3: div.leaflet-pane.leaflet-tile-pane4: div.leaflet-pane.leaflet-map-pane5: div#dv-mapa-leaf.col-lg-12.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoomlength: 6__proto__: Array(0)returnValue: truesrcElement: nulltarget: nulltimeStamp: 187361.59999998927type: "error"proto: Event (anonymous) @ bundle.js:1 Promise.catch (async) _createImagePlaceholder @ bundle.js:1 printMap @ bundle.js:1 h @ leaflet.js:6

Some body help me?

[errazkisibawaih]

I got the same error. When I export as PNG a simple map without extra layers and legend it's work , but when i export Map with layers and legend it display this error. help us please

[BrayoKane]

Getting a similar error when using a map with tile layer!

[tillsc]

I found two sources of this problem for me:

1. Icons based upon data-URIs: Do not use data-URIs for Icons or the generated svg-data-URI will countain further data-URIs and thereby it won't work
2. Missing icon images: All Icon images muss be URIs pointig to valid images.

[ibrahimadiakhate]

I got the same error with blank page.

[bsoviedo]

@tillsc answer deals nicelly with the issue.

I found two sources of this problem for me:

1. Icons based upon data-URIs: Do not use data-URIs for Icons or the generated svg-data-URI will countain further data-URIs and thereby it won't work
2. Missing icon images: All Icon images muss be URIs pointig to valid images.

I switched from SVG from PNG images and everything works fine. Even with animated GIFS works fine. Im working also with leaflet.colorIcon.js and leaflet.markercluster plugins and everything works!

I think this items must be added to the descriptions on Readme.md .!

[syks0121]

@tillsc

I found two sources of this problem for me:

1. Icons based upon data-URIs: Do not use data-URIs for Icons or the generated svg-data-URI will countain further data-URIs and thereby it won't wor
2. Missing icon images: All Icon images muss be URIs pointig to valid images.、

Thank you very much for your answer. I used the leaflet.minimap and leaflet.markercluster plugins during the development of Vue. It worked fine during the development process, but not work after packged.

1. toggle.png in minimap css cannot be found.
2. Problem with icon path when using markercluster I placed these icons in the public path and they run normally after packged.