Version:

• @inertiajs/react version: 1.0.14

Describe the problem:

The application crashes when navigating through the browser history using the go back & go forward buttons if the useRemember hook is used on a page. If we are on a page that uses the useRemember hook, if we navigate to another page by entering the page’s URL in the address bar (i.e., a full page visit, not using Inertia’s Link component) and then click on the go back button next to the address bar, the application throws an error and displays a white screen:

This issue occurs with both Vite and Laravel-Mix. The only difference is that with Vite, the application doesn’t break and display a white screen.

I’ve created a repo to demonstrate this bug on the /login page. The repo has two branches: main for the Laravel-Mix version and vite-version for the Vite version.

export default function Login({ status, canResetPassword }) {
    const { data, setData, post, processing, errors, reset } = useForm({
        email: "",
        password: "",
        remember: false,
    });

    const [count, setCount] = useRemember(0, "count");

    // ...
}

There is no difference between providing a key (the second argument, in this case "count") to useRemember and not providing one at all.

Laravel-Mix version:

When debugging the app.jsx file, it can be observed that during the first render after navigating back to /login from /register, the name argument of the resolve function is Auth/Login. However, during the second render (which I don't know why Inertia renders the components twice!!!), the name argument is undefined, which causes the error.

Vite version:

The same issue occurs when debugging the app.jsx file in the Vite version.

By the way, this bug doesn’t show up when you’re using the Vue version of Inertia.

Steps to reproduce:

1- Create an Inertia project.
2- Use the useRemember hook in a component
3- Visit the page that includes the component using the useRemember
4- Enter an arbitrary URL in the address bar (either within your own app or another website) and hit enter, now click on the go back button next to the address bar.

Alternatively, you can clone this repo, which has two branches: main for the Laravel-Mix version and vite-version for the Vite version.