Uncaught TypeError: history.pushState is not a function

Question

Hii...i am using office.js library in my blazor wasm project and it's working nice but when when i am trying to navigate my application to other razor component (by using "href" attribute or navigation manager) it's throwing error

Uncaught TypeError: history.pushState is not a function
at we (blazor.webassembly.js:1:27646)
at blazor.webassembly.js:1:19714
at blazor.webassembly.js:1:13258
at Array.forEach (<anonymous>)
at k.onGlobalEvent (blazor.webassembly.js:1:13246)

my sample code is

<li class="nav-item custom">  
          <a href="report" class="nav-link "> <i class="fa fa-bar-chart"></i> Report </a>  
     </li>  

razor component code

@page "/report"  
  
   <div class="col-xl-6 col-md-6">  
            <div class="card">  
                <div class="card-body" style="padding:9px !important">  
                    <div style="width: 100%;">  
                        <DrillDown_Summary Total="total" Hits="hits" Reported="reported" PronePercent="pronePercent" />  
                    </div>  
                </div>  
            </div>  
        </div>  
@code{  
.......  
}  

Thanks..

Answer 1

It seems that office.js nullifies history.pushState by design see https://github.com/OfficeDev/office-js/issues/429. One solution from https://stackoverflow.com/questions/42642863/office-js-nullifies-browser-history-functions-breaking-history-usage is to cach it before calling office.js with something like this :

<script type="text/javascript">
    // Office js deletes window.history.pushState and window.history.replaceState. Cache them and restore them
    window._historyCache = {
        replaceState: window.history.replaceState,
        pushState: window.history.pushState
    };
</script>

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

<script type="text/javascript">
    // Office js deletes window.history.pushState and window.history.replaceState. Restore them
    window.history.replaceState = window._historyCache.replaceState;
    window.history.pushState = window._historyCache.pushState;
</script>