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

[Andrés Maldonado]

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.

[stephen sontag]

I'm seeing this too

[Mger Soukiasian]

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

[Miguel Gonzalez]

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?

[Sibawaih Er-razki]

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

[Brian Odhiambo]

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

[Till Schulte-Coerne]

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 .!

[syks]

@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.