react-to-print behaves differently when signed in/out of Google Chrome

[DitisAlex]

Hello!

As the title states, my print review completely empty (and prints an empty page too) when I am signed out of Google Chrome, but when I am signed in it prints like my application is expecting. I have checked active flags and settings to make sure everything is identical. Besides of that I have tried using different browsers such as Firefox, in which it prints fine, to ensure it isn't an extension issue.

My current application is based on MERN stack and the printer I am using is a Star TSP100IIIW (POS Printer). I have setup the printer correctly as it functions on other pc's (tested both MacOS & Windows)

Besides of that, I have tested the application (signed in/out of Chrome) in an localhost environment, a localhost serve build and on an actual vps.

Last but not least, the printing settings are identical and yet it results in something completely different (see added images).

I have no idea why this is occuring and the only way of recreating the problem is by simply using the Google Chrome 'guest' account. If needed I can supply some code of my existing application.

Kind regards, Alex

[DitisAlex]

Update:

I disabled the Grammarly extension (https://chrome.google.com/webstore/detail/grammarly-for-chrome/kbfnbcaeplbcioakkpcpgfkobkghlhen) and for some reason the preview stopped working just like the signed out version.

To confirm my suspicion I made a new Chrome user and added the Grammarly extension on that one, and for some reason my preview issue has been solved...

I have no idea why this fixed my issue, so please still look into it!

Kind regards, Alex

[MatthewHerbst]

Hi Alex. Thanks for reporting, this sounds very strange indeed. So, to be clear, on signed-out Chrome the print does not work as expected, but when you sign in, or add in Grammarly, the print does work as expected?

If you could provide a codesandbox replicating the issue that would be eternally helpful, thank you!

[DitisAlex]

To be exact: the problem didn't seem to be based on signed in/out of Chrome, but on the Grammarly extension itself. If this extension is enabled then the print preview works completely fine and as expected, but as soon as I disable it, the print preview turns blank (refer to screenshots from earlier)

Codebox with code example (instead of dynamic print component it is hard coded): https://codesandbox.io/s/focused-gareth-llsug

[MatthewHerbst]

Fascinating. When I go to print (Chrome 91) using the codesandbox example above (I have never had Grammarly installed) this is what I see. Is this the expected output, or the broken output?

[DitisAlex]

Your output is the expected output, I just rechecked the codesandbox and it works as expected for me there too.

Yet in my application the following behaviour occurs, see gyazo gif: https://gyazo.com/0e8b969ca3bd92d3f37b9865c1f773f3

As you can clearly see, if I disable Grammarly extension the preview displays nothing and it will result in printing an empty paper.

If needed, I could link my GitHub repository for the complete source code?

Would love to hear a reaction!

Kind regards, Alex

[MatthewHerbst]

If needed, I could link my GitHub repository for the complete source code?

If it's easy for me to run it sure, happy to take a look.

One other test to do: if you start with Grammarly off, then load the page, does it work? Then, if you turn Grammarly on and off again does it still work? I wonder if Grammarly injects some CSS on the page and then improperly cleans that up when turned off.

[DitisAlex]

To answer your test: nope, it doesn't work at all when I have Grammarly off from the start. Nor does turning it on and off change anything. It only works when the extension is enabled.

---

Also my application is relatively easy to start, here is a short guide on how to install the application locally: Keep in mind: prerequisite is a MongoDB database, doesn't matter if it's locally with application such as Robo 3T or on the cloud with MongoDB Atlas.

GitHub repository: https://github.com/DitisAlex/SinChen

---

Back-End:

• Navigate to back-end:

  cd SinChen/Back-End

• Install required dependencies:

  npm install

• Create an .env file containing the following:

  MONGODB_LOGIN_URL={link to your mongodb database} //default mongodb://localhost:27017/MyDb
  SERVER_PORT={desired port app listens to} //default 80
  SECRET_KEY={any string for auth, not important for testing this issue}

• Start the back-end environment:

  nodemon App.js

  _Seed files can be located in SinChen/Back-End/seedfiles - execute them with ```node seed{file-name}```_

  ---

Front-End:

• Navigate to front-end:

  cd SinChen/Front-End

• Install required dependencies:

  npm install

• Start the front-end environment:

  npm start

  Note: if you used a different port than 80 in the Back-End, then you must change it in the ServerCommunications.js file (row 3)

  ---

  How to use the app:

• Now that both front- and back-end are running you should be able to use the application at localhost:{port}.

• Simply login with the accounts created by the seed_users.js file -> username: user, password: user

• Select some items with the + & - buttons

• Now hit the order button, or in dutch Bestel -> this will trigger the ReactToPrint components

• This is where the error occurs for me

  ---

  Hopefully this explained you how to install my current application quick and easy. If there are any further questions about how the application works, how to deploy it locally, etc... Feel free to respond here

Kind regards, Alex

[MatthewHerbst]

Apologies for not responding, I've had to focus on work the past few weeks. I hope to have time to continue investigating this this weekend, thanks

[DitisAlex]

bump

[sevenlure]

Hi, @DitisAlex, I found the reason. The reason is that the iframe can't load the font before print (you can see my snapshot). Work around: you add properties to ReactToPrint:

print: async(target)=> {
      await sleep(500)
      target.contentWindow?.print()
      return
    },

Sorry my english not good.

[MatthewHerbst]

It is also possible to pass custom fonts in as props and react-to-print will wait to print until they are loaded

[DitisAlex]

Alright, thanks for the help @MatthewHerbst @MatthewHerbst. Closing issue now.