Cannot read properties of undefined (reading 'version')

I've been getting the error below by posting a simple inertia form in production. Everything works well in development. The browser network tab doesn't log any request, and the only error I'm getting is this vague message on the console, also the request never reaches the controller. Does anyone have any idea of what could be cause this error?

Here is the error message:

index.esm-DaZQPhBF.js:4 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'version')
    at Yr.getHeaders (index.esm-DaZQPhBF.js:4:57092)
    at Yr.send (index.esm-DaZQPhBF.js:4:55877)
    at da.send (index.esm-DaZQPhBF.js:4:57294)
    at $o.visit (index.esm-DaZQPhBF.js:4:59501)
    at $o.post (index.esm-DaZQPhBF.js:4:58281)
    at index.esm-DaZQPhBF.js:69:13670
    at Object.post (index.esm-DaZQPhBF.js:69:14334)
    at m (VinPasswordField-D3AE2o0Z.js:1:4274)
    at Object.yi (app-CW6qCWRM.js:111:9840)
    at vi (app-CW6qCWRM.js:111:9994)
    at eo (app-CW6qCWRM.js:111:10051)
    at Sd (app-CW6qCWRM.js:111:31387)
    at wd (app-CW6qCWRM.js:111:31804)
    at app-CW6qCWRM.js:111:36855
    at ju (app-CW6qCWRM.js:114:36975)
    at mi (app-CW6qCWRM.js:111:8977)

The index.esm-DaZQPhBF.js:4:57092 is a inertia file, not a file I wrote, the error is happening on the return statement below:

...
getHeaders() {
        let e = {
            ...this.requestParams.headers(),
            Accept: "text/html, application/xhtml+xml",
            "X-Requested-With": "XMLHttpRequest",
            "X-Inertia": !0
        };
        return M.get().version && (e["X-Inertia-Version"] = M.get().version),
        e
    }

And here is my form submission, the error happens when the post is called:

const handleSubmit = (e) => {
    e.preventDefault();

    const options = {
      preserveScroll: false,
      onSuccess: () => {
        if(props.onSuccess){
          props.onSuccess(frm);
        } else {
          frm.reset();
          toastSuccess();
        }
      },
      onError: (errors) => {
        console.log(errors);
        VinToastUtils.toastError(errors?.message ?? errors);
        if(props.onError){
          props.onError(frm);
        }
      },
    };

    console.log(frm);
    if(props.obj.id > 0){
      if(props.updateRouteName){
        frm.put(route(props.updateRouteName), options);
      } else {
        toastUpRoute();
      }
    } else {
      if(props.createRouteName){
        frm.post(route(props.createRouteName), options);
      } else {
        toastCrRoute();
      }
    }
  };

Not sure where else to look for help, AI didn't help much. it seems to be a framework bug. I'm using inertia 2.0.3.

Adding some more context to this issue: I noticed that the CurrentPage.page object is declared as not nullable, but for some reason here: https://github.com/inertiajs/inertia/blob/fc8e1d4cccbc90b1b714087e4fbb01611375298c/packages/core/src/request.ts#L137 is throwing the error "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'version')" so I'm not quite sure why.

LaryAI

1 year ago

Level 58

The error you're encountering, "Cannot read properties of undefined (reading 'version')", suggests that the M.get().version is returning undefined. This typically happens when the Inertia version is not being set correctly in your application.

Here are a few steps you can take to troubleshoot and potentially resolve this issue:

Check Inertia Middleware: Ensure that your server-side Inertia middleware is correctly setting the Inertia version. In a Laravel application, this is usually done in the HandleInertiaRequests middleware. Make sure the version method is returning a valid version string.
```
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    // ...

    public function version(Request $request)
    {
        return parent::version($request) ?? md5_file(public_path('mix-manifest.json'));
    }
}
```
If you're using a different backend, ensure that the version is being set similarly.
Check Asset Versioning: If you're using asset versioning (e.g., with Laravel Mix), ensure that your mix-manifest.json file is present and correctly configured in the public directory. This file is used to determine the current version of your assets.
Verify Inertia Setup: Double-check your Inertia setup to ensure that the client-side and server-side configurations are correct. Make sure that the Inertia library is properly initialized in your JavaScript code.
Environment Differences: Since the issue only occurs in production, there might be differences in your environment configuration. Check for any discrepancies between your development and production environments, such as different versions of dependencies or missing environment variables.
Debugging: Add some debugging statements to log the value of M.get().version before it's used. This can help you determine if the value is indeed undefined and why.
Update Dependencies: Ensure that all your dependencies are up to date. Sometimes, bugs are fixed in newer versions of libraries. Run npm update or yarn upgrade to update your JavaScript dependencies.

If none of these steps resolve the issue, consider creating a minimal reproducible example and posting it on the Laracasts forum or GitHub issues for further assistance. This will help others understand the context and provide more targeted help.

vinalvess

1 year ago

Level 4

I created a pr with a "fix" for this issue. But there should have a better way to use the useForm and usePage hooks on a separate package, that I don't know about yet.

https://github.com/inertiajs/inertia/pull/2241

vinalvess

1 year ago

Level 4

Here is how I solved this issue:

https://github.com/inertiajs/inertia/pull/2241#issuecomment-2683292288

leavingstone

11 months ago

Level 22

@vinalvess please how to solve this vue js nova ?

Please or to participate in this conversation.