Bad developer practice causes JS exception

[ipddev]

Adding href=# to an A tag and then scrolling after clicking triggers an Exception in FireFox (v134.0) with the following error:

Uncaught (in promise) TypeError: window.history.state is null
    saveScrollPositions history.ts:106
    promise callback*saveScrollPositions/< history.ts:103

Although its bad practice, I think it needs to be handled as it still seems quite a common unfortunately, and it took a lot of head scratching to realise what was causing the site to stop working!

Link to line:

inertia/packages/core/src/history.ts

Line 106 in 66985bf

page: window.history.state.page,

[danmatthews]

I have PR for this, we've had the same issue:

#2189

[davidwessman]

We are experiencing this when doing $inertia.reload as well, some could be replaced by router.poll and it fixes the error, but we have reloads when we do e.g. pagination as well.

[danmatthews]

@davidwessman are you using replaceState: true in those reloads? Just wondering if that causes the state to be initialised to null and then causes the error.

[davidwessman]

Right now it looks like:

created() {
    this.poll();
  },

  methods: {
    poll() {
      this.$inertia.reload({
        onSuccess: (event) => {
          if (event.component === "PollingShow") {
            setTimeout(this.poll, 1000);
          }
        },
      });
    },
  },

Context: This is Vue3 🙂

[joetannenbaum]

Does anyone have a clean example of producing this error? Trying to write a test that replicates the behavior and having trouble. Clean meaning: fire up a fresh Inertia app and write the simplest script possible to re-create the error.

[danmatthews]

@ipddev @davidwessman can you both drop your package.json's here please? Trying to see if this might be caused by something in a common dependency or something, or version specific to a certain vite version maybe.

EDIT: and possibly your vite.config.js if you don't mind?

[danmatthews]

Found it, i think @joetannenbaum.

Seems to happen (for us) when doing a router.reload immediately in the onMount of a Svelte component on the page immediately after returning from an Inertia::location() call.

We're still using Inertia::lazy here, and this would likely be fixed by refactoring to ::defer() but it's a good one to fix for backwards compatibility. My guess is likely something to do with the new async nature of requests.

Simple repro repo below, just npm install and composer install 👍🏻

inertia-svelte-repro.zip

EDIT: i'd wager this is what's happening with @davidwessman as well as it looks like the reload they're calling is happening as soon as the component is created too - looks likely to be that inertia.reload is pushed onto the queue before the initial call to pushState is able to be called to set up the page state?

[LucaRed]

I'm also encountering the same problem on Vue 3 and Inertia 2.0, with Firefox 134.0.

I get the error when I click on a Inertia <Link> inside of a persistent layout.

Uncaught (in promise) TypeError: window.history.state is null
    saveScrollPositions history.ts:106
    promise callback*saveScrollPositions/< history.ts:103

I'll try to create a minimum repro as soon as I have some time.

[danmatthews]

@LucaRed do you have any router.{visit|reload|get|post|etc...} calls inside your components created hook?

or maybe one that triggers on an observer in the persistent layout?

[joetannenbaum]

Found it, i think @joetannenbaum.

Seems to happen (for us) when doing a router.reload immediately in the onMount of a Svelte component on the page immediately after returning from an Inertia::location() call.

We're still using Inertia::lazy here, and this would likely be fixed by refactoring to ::defer() but it's a good one to fix for backwards compatibility. My guess is likely something to do with the new async nature of requests.

Simple repro repo below, just npm install and composer install 👍🏻

inertia-svelte-repro.zip

EDIT: i'd wager this is what's happening with @davidwessman as well as it looks like the reload they're calling is happening as soon as the component is created too - looks likely to be that inertia.reload is pushed onto the queue before the initial call to pushState is able to be called to set up the page state?

This was immensely helpful, thanks @danmatthews 👍

[davidwessman]

I waited to release until 2.0.3 and then we started getting some errors in production for:

Cannot read properties of null (reading 'scrollRegions') in

Anyone seeing something similar? Still trying to reproduce.

[danmatthews]

@davidwessman definitely open another issue if you haven't already, i'll try re-upgrading our app to 2.0 tonight and see if we get the same thing.