React-to-print: Image duplication in IE

[greeneman42]

I'm having an issue with images duplicating once or twice when using this in IE. In FF and Chrome it prints as expected; a document with just a single image. But in IE, the result is multiple images stacked on the document. Other elements will render fine around it.

class Printable extends React.Component {
    render() {
        return (
            <div className="printable-wrapper">
                <img src={require('../media/logo.png')} alt=""/>
            </div>
        )
    }
}

This document comes out with two images stacked but I've seen it do three as well. Is there maybe a workaround or known reason for this happening?

edit: this was in IE 11

[MatthewHerbst]

Hello, thanks for the report. Could you by chance make a working codesandbox or similar showing the full code/problem? Thanks

[greeneman42]

Sure thing.

https://codesandbox.io/s/react-to-print-multi-image-issue-in-ie-example-gpxg6

I don't think codesandbox works in IE but I pulled it up in Edge and it has the same issue it looks like. Thanks

[chrisphillers]

I am having this issue also.

[dioscarey]

I had the same issue but I was able to avoid this issue removing header images-> https://github.com/gregnb/react-to-print/pull/236

[MatthewHerbst]

I'm unable to reproduce the Edge 80 using BrowserStack. I believe you all that this is happening, I'm just not able to reproduce it yet (meaning I can't vet any fixes for it). I've requested free access from them via their open source program to be able to test using IE (normally requires a paid plan).

[strange1120]

any update on this issue ? experiencing the same thing in IE in company production code. i see there is an open PR for the edge issue that seems to include a fix for IE as well.

[lantanios]

Both IE 11 and Edge 42 are pulling all the img tags that exist on the page (outside of the ref div) and showing them on print screen at the top of the page.

I'm using react-to-print 2.6.3

[MatthewHerbst]

I'm going to do my best to get #236 released with #239 this week, possibly this afternoon.

[MatthewHerbst]

I've published a new release, 2.7.0-beta.1 Could you please try it out and see if it fixes the problems?

[lantanios]

Hi. I tried the new beta and getting compilation error:

Failed to compile.

./node_modules/react-to-print/lib/index.js
Module not found: Can't resolve 'ReactDOM' in '*\node_modules\react-to-print\lib'

[strange1120]

Hi. I tried the new beta and getting compilation error:

Failed to compile.

./node_modules/react-to-print/lib/index.js
Module not found: Can't resolve 'ReactDOM' in '*\node_modules\react-to-print\lib'

Receiving this error as well in my build.

[MatthewHerbst]

Oops, my mistake. That error is coming from this change, which I have reverted in 1.7.0-beta.2 which is now available. Sorry for that. It doesn't impact the local experience apparently which is why I didn't catch it while developing locally.

[MatthewHerbst]

Please let me know how 1.7.0-beta.2 works for you, thank you for working with me on this.

[lantanios]

1.7.0-beta.2 has solved the issue in both Edge and IE.
Thank you for quick response and solution!

[strange1120]

Thanks for the quick solution! Pushed and tested the update and it works great.

[dioscarey]

@MatthewHerbst Awesome, thanks! That works, next week I'll do better tests, but apparently it works as expected great work!

[MatthewHerbst]

This is out of beta and published as 2.7.0. Glad this seems to be working for everyone, and thanks for working with me to get it fixed! Going to close this for now. Please feel free to comment and/or open a new issue if you find any problems.