I'm using the Modern Script Editor Webpart from pnp/sp-dev-fx-webparts GitHub. Installation and deployment all went fine and I can also execute JavaScript code on my sample modern teamsite.

Here's an example:

<script type="text/javascript">
let elem = document.querySelectorAll("[class='CanvasComponentWrapper']");
elem[0].style.maxWidth = '90%';

This code widens the canvas and it works as intended. However when I leave the homepage, going into Documents for exmaple, and navigate back to Home the script is not applied any longer. On the other hand, if I click on Home once more in the Quick Launch nav it will reload the script.

So the behavior is: After leaving and returning to the page hosting the webpart/script the script is not reapplied unless the page was reloaded twice.

Any idea why that could be?

enter image description here


However, I noticed that

  • Which version are you running? I added a fix in April last year to re-trigger on smart navigation scenarios but might be it only works if you reference a script and not inline ones. Commented Jan 28, 2021 at 13:02
  • Thanks for your comment. I had installed the latest version I added a .gif to demonstrate what's happening. Basically the CanvasComponent gets resized to 33% max-width. That works. However, if I clicka nav link to move into another library and go back home the script is no longer applied and the width is the default. Any idea? Thanks. Commented Jan 29, 2021 at 13:52
  • I don't have repro, and seems to work as intented. I used the below which sets width of the header of a modern page. Alert is there to show it triggers on each navigation. <script type="text/javascript"> var elem = document.querySelectorAll("[class='webPartContainer']"); elem[0].style.maxWidth = '80%'; alert('a'); </script> Commented Jan 29, 2021 at 18:02
  • Thanks for testing. So alert() always works even when coming back from another navigation node. However, applied styles don't like described. Can you test with hiding the site title? <script type="text/javascript"> let elem = document.querySelectorAll("span[role*='heading']"); elem[0].style.display = 'none'; </script> That also doesn't work but it should be easier for you to test. Thanks. Commented Jan 30, 2021 at 12:46
  • Works fine, but you have to replace "let" with "var", as let is not a JavaScript keyword. (Which I did the first time around as well.) Commented Feb 1, 2021 at 7:29

1 Answer 1


Replace let with var to have compliant JavaScript and it should work just fine.

  • That was it! Thanks and I apologize. Didn`t occur to me that this could have been the problem. Commented Feb 1, 2021 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.