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