[Vue3] [React] `window.history.state` is null causing errors after upgrading to 2.0.3

[davidwessman]

Version:

• @inertiajs/vue3 version: 2.0.3

Describe the problem:

Before upgrading to 2.0.2 we had tests failing due to #2195.
Then we waited for 2.0.3 fixing the first issue, but as soon as we deployed to production we started receiving other errors of similar nature.

We might be doing something bad in these views, it seems related to some navigation but I cannot pinpoint it.

TypeError
window.history.state is null

Steps to reproduce:

I cannot reproduce it, but the errors were rolling into Sentry until we reverted.
Will try to make an example if I can :/

[scott-t]

We have what is likely the same issue, except in React. Similarly, I haven't been able to reproduce myself, but we started seeing issues in 2.0.2, but not 2.0.0. We didn't have 2.0.1 deployed, and not yet tried 2.0.3.

Cannot read properties of null (reading 'scrollRegions')

Will also keep trying to replicate locally.

[danmatthews]

@davidwessman did you say in the original comment that this was in iOS?

There's an if statement at some point that switches some of the logic depending on the user agent if i remember rightly.

[davidwessman]

@davidwessman did you say in the original comment that this was in iOS?

There's an if statement at some point that switches some of the logic depending on the user agent if i remember rightly.

Hm, not what I can remember. You mean here #2195 (comment)?

[danmatthews]

@davidwessman nevermind, must have been thinking of something else, sorry!

[hivokas]

I've started getting these errors in BugSnag after upgrading from 2.0.0 to 2.0.3.

[joelstein]

Same, seeing this issue in Sentry. We're using React.

Cannot read properties of null (reading 'scrollRegions')

[MarcEspiard]

Same here on React, right after upgrading from 2.0.0 to 2.0.3.

All events occured on Chrome Mobile and Edge Mobile, on Android, at least for now.

[MarcEspiard]

Got another report for a different value, but seems to be the same issue:

Again on Edge Mobile / Android, on 2.0.3

It does look like the issue discussed #2195 (comment)

[davidwessman]

Ah, seems to be happening on iOS locally as well - good find! 🙂 @MarcEspiard (iOS Safari)

[michaelnabil230]

I’m experiencing the same issue. Are there any updates?

[blackjak231]

@joetannenbaum this is related to #2200 that was merged last week. In our case it's causing some major outages in production with clients reporting they're unable to navigate. Same as everybody, I have been able to reproduce but not consistantly.

Reverting back to 2.0.0 solved the issue for us.

[neluba]

I don't have the issue myself, but i can force it by replacing the history state in the javascript console with window.history.replaceState(null, '', '/') and scrolling the page a bit afterwards.

This could also happen if you use window.history.pushState or replaceState somewhere in your codebase without putting in the current state, to add query parameters or do something else. It could also be an external script which tries to modify the state, like a cookie consent manager.

This breaks:

window.history.pushState(null, "", url.toString())

This won't:

window.history.pushState(window.history.state, "", url.toString())

Why the error happens:

The saveDocumentScrollPosition() function in core/history.ts gets called on scroll and tries access window.history.state.page which doesn't exist anymore and throws an uncaught error which seems to break the promise queue.
I think a simple window.history.state?.page wouldn't do the trick here, because the state is still broken. I don't know the code well enough , but I think you'd have to rebuild the state and update the values afterwards.

The getScrollRegions() and getDocumentScrollPosition() functions could also be affected, because they directly access the object key on state. Those function haven't thrown errors for me though.

[RSpeekenbrink]

I get this issue when navigating from a non-inertia to an inertia page in the same application.

In my case it is the getScrollRegions() function.

@inertiajs_react.js?v=387df219:3538 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'scrollRegions')

Seems like a nullcheck on state here would do the trick as it will return a default state in that case.

Using react adapter 2.0.3