width undefined when using "printMap(size, filename)"

The output in the console is:

    proxyConsole.js:56 oops, something went wrong! TypeError: Cannot read property 'width' of undefined
        at NewClass._resizeAndPrintMap (bundle.js:1)
        at bundle.js:1
        at <anonymous>
    __stack_frame_overlay_proxy_console__ @ proxyConsole.js:56
    (anonymous) @ bundle.js:1
    Promise rejected (async)
    _createImagePlaceholder @ bundle.js:1
    printMap @ bundle.js:1
    (anonymous) @ PrintControl.js:42
    (anonymous) @ withHandlers.js:92
    ./node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69
    executeDispatch @ EventPluginUtils.js:85
    executeDispatchesInOrder @ EventPluginUtils.js:108
    executeDispatchesAndRelease @ EventPluginHub.js:43
    executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54
    forEachAccumulated @ forEachAccumulated.js:24
    processEventQueue @ EventPluginHub.js:254
    runEventQueueInBatch @ ReactEventEmitterMixin.js:17
    handleTopLevel @ ReactEventEmitterMixin.js:27
    handleTopLevelImpl @ ReactEventListener.js:72
    perform @ Transaction.js:143
    batchedUpdates @ ReactDefaultBatchingStrategy.js:62
    batchedUpdates @ ReactUpdates.js:97
    dispatchEvent @ ReactEventListener.js:147

My component is:

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import 'leaflet'
    import 'leaflet-easyprint'
    import Control from 'react-leaflet-control'
    import FontIcon from 'material-ui/FontIcon'
    import styled from 'styled-components'
    import compose from 'recompose/compose'
    import withState from 'recompose/withState'
    import withHandlers from 'recompose/withHandlers'
    import getContext from 'recompose/getContext'
    import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
    import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'
    import getMuiTheme from 'material-ui/styles/getMuiTheme'

    const StyledButton = styled.button`
      background-color: white;
      width: 47px;
      height: 47px;
      border-radius: 5px;
      border: 2px solid rgba(0, 0, 0, 0.2);
      background-clip: padding-box;
      span {
        color: rgba(0, 0, 0, 0.54) !important;
      }
    `

    const theme = Object.assign({}, darkBaseTheme, {
      appBar: {
        height: 51,
      },
    })

    const enhance = compose(
      getContext({ map: PropTypes.object.isRequired }),
      withState('printPlugin', 'changePrintPlugin', {}),
      withHandlers({
        savePng: props => () => {
          const { printPlugin } = props
          printPlugin.printMap('Current', 'apfloraKarte')
        },
      })
    )

    class PrintControl extends Component {
      props: {
        savePng: () => void,
        printPlugin: object,
        changePrintPlugin: () => void,
      }

      componentDidMount() {
        const { map, changePrintPlugin } = this.props
        const options = {
          hidden: true,
          position: 'topright',
          // sizeModes may not be needed?
          sizeModes: ['Current'],
          exportOnly: true,
          filename: 'apfloraKarte',
        }
        const pp = window.L.easyPrint(options).addTo(map)
        changePrintPlugin(pp)
      }

      render() {
        const { savePng } = this.props

        return (
          <Control position="topright">
            <StyledButton onClick={savePng} title="Karte als png speichern">
              <MuiThemeProvider muiTheme={getMuiTheme(theme)}>
                <FontIcon id="karteAlsPngSpeichern" className="material-icons">
                  file_download
                </FontIcon>
              </MuiThemeProvider>
            </StyledButton>
          </Control>
        )
      }
    }

    export default enhance(PrintControl)

Seems like the same problem as https://github.com/rowanwins/leaflet-easyPrint/issues/32

[hankerspace]

Found a solution, simply use these values:

• “A4Portrait page”
• “A4Landscape page”
• “CurrentSize”

Example: printPlugin.printMap(‘A4Landscape page’, ‘MyFileName’);

Best 😉

[jstie]

I have the same issues replicating the simple example from the github-page.

This ‘works’ (with Leaflet-controls disappearing and reappearing):

`var printPlugin = L.easyPrint({ title: ‘My awesome print button’, hidden: true, exportOnly: true, }).addTo(map);

$(‘#map’).click(function() { printPlugin.printMap(‘CurrentSize’, ‘MyFileName’); }) `

But using ‘Current’, ‘A4Landscape’, ‘A4Portrait’ and self-defined sizes i get:

index.js:141 oops, something went wrong! TypeError: Cannot read property ‘width’ of undefined at b._resizeAndPrintMap (index.js:151) at index.js:138 at <anonymous>