got a javascript TypeError `Cannot read property 'x-inertia' of undefined`

fengzi91 commented 3 years ago

// package.json
"@inertiajs/inertia": "^0.8.5",
"@inertiajs/inertia-vue": "^0.5.5",
// composer.json
"inertiajs/inertia-laravel": "^0.4.2"

// routes
Route::get('register', [UserController::class, 'create']);
Route::post('register', [UserController::class, 'store']);

// UserController
...
    public function create()
    {
        return Inertia::render('user/register.vue');
    }

    public function store(Request $request)
    {
        $request->validate($this->userRegisterRule(), ['captcha.*' => 'captcha error']);

        $user = $this->saveUser($request->only(['phone']));
        Auth::loginAs($user);
        return Redirect::route('users.show', $user);
    }
...

// register.vue
<template>
...
<form
  action=""
  @submit.prevent="register"
>
<input
                                type="text"
                                v-model="phoneNumber"
                            />
<button type="submit">Submit</button>
</form>
...
</template>
...
props: {
        errors: Object
    },
data() {
   return {
      phoneNumber: 'xxxxxx',
  }
},
methods: {
   async register() {
            this.$inertia.post("/register", {
                phone: this.phoneNumber
            });
        },
}

When the form vaildate fail, I got error in browse console, like this 'index.js?5b3d:1 Uncaught (in promise) TypeError: Cannot read property 'x-inertia' of undefined at Object.isInertiaResponse'

reinink commented 3 years ago

Can you should me the response you're getting in the browser that's causing this?

fengzi91 commented 3 years ago

HTTP/1.1 302 Found
Host: localhost
Date: Wed, 09 Jun 2021 12:16:48 GMT
Connection: close
X-Powered-By: PHP/8.0.5
Cache-Control: no-cache, private
Date: Wed, 09 Jun 2021 12:16:48 GMT
Location: http://localhost/register
Content-Type: text/html; charset=UTF-8
Set-Cookie: XSRF-TOKEN=eyJpdiI6IlZ2YTJ4MmhERjNPUGlReS9ZTFlzVGc9PSIsInZhbHVlIjoiUHo1WXBtOURUZHZQVUJNNDAzRmpiSkRLUi9aci9SeThVdERWN0tqNEpHb291cXpPTkZSNjhvN1lSTlp4aHJqRTRsWDNQV1VxR0dzcjZKcmVTSWc2U0h1Ujl2VjhDQkpZNklkZHc3dnRBdjYyWXlaRlRRWnhzaXNKSkwxY3o0a2MiLCJtYWMiOiI5NTBmNTE5MTNiMWQ5MTYxOGIwOTMxNmJlNDg3MTg1Njc1Y2FlYTUzNmU3ODA0ZGY0MmNmNzJhZDNmN2JlYmJmIn0%3D; expires=Wed, 09-Jun-2021 14:16:48 GMT; Max-Age=7200; path=/; samesite=lax
Set-Cookie: laravel_session=eyJpdiI6Ik9WM2pvOUJKMlRteTlyeG9qUjQ1YVE9PSIsInZhbHVlIjoiT3pabm1IazhrQmZuVjZSOXUzeWlBSXVIa05FYk1wQkY4bXh5a1htSmFCL01PaUVNcTlDKzdUbkNYckYyaWhKb1lNTktKbTJxNnNLWStGYUJjSlNXaWZIL0o1QStpbCtSMVFVTEMrY09TdUNFZmlVSEkwZnlyQXZWcEtYRE9FaWkiLCJtYWMiOiI1Y2IyODUxNjM1ZDJjMTc0MDBiYzA0ODhkMjQ1NDZjYTVmN2YwMTdhMDYxNGY3MWFhNTAwNWExMzZjODRmYzc4In0%3D; expires=Wed, 09-Jun-2021 14:16:48 GMT; Max-Age=7200; path=/; httponly; samesite=lax

HTTP/1.1 200 OK
Host: localhost
Date: Wed, 09 Jun 2021 12:16:48 GMT
Connection: close
X-Powered-By: PHP/8.0.5
Vary: Accept
X-Inertia: true
Cache-Control: no-cache, private
Date: Wed, 09 Jun 2021 12:16:48 GMT
Content-Type: application/json
Set-Cookie: XSRF-TOKEN=eyJpdiI6IkNpZHZhcm5aZkYvb1lYclRrUEJZdXc9PSIsInZhbHVlIjoiWEphYUxVamZkRmMvVmhwOXJQdVU3QWQxT2kxVEdjVU5XRzJ5dDYzREJXSS9IeUVaNzJ5NTRKUkZ3djUrOUlqaGNLdU1sRXZmQUo0Szd6a0hOTGdVWmd0VTJWQ1ZtRzRnNkpxbERvWXNxbWZ5eDFPWi8zbjhEczVrOHRCRFhGdXAiLCJtYWMiOiJlOTI1ODA3OGNjNWRhYWQ5NmYyMDIwNDgxOTA0NmI3ZTNmMzE5M2YxOWI5MGE4MjgwMWFhZTIxOTI3ZjdmMGYxIn0%3D; expires=Wed, 09-Jun-2021 14:16:48 GMT; Max-Age=7200; path=/; samesite=lax
Set-Cookie: laravel_session=eyJpdiI6IjdWQ1NHaEJIRmxmS09JR2Yvdncrb1E9PSIsInZhbHVlIjoiRGxQUU91MUZ3KzFVSFczTC9Wd29KWTliV3NTUEg3a2tVdXNRYVp5LzhNM2pMTFVCMWk0UUVDNmNPLzJwaml6VmN0Q0wweStsZTdoZTY4cGRjczdiY21oWUt1MnI5WE1uM09qTC9idkk0aW5pOWk2YzBPUFhzUDVuWDc5b0hEVjMiLCJtYWMiOiI5N2ZhZDg1OTk2M2VkNDI3NWFlNTc5NzAwYjhjN2NhMzdmOGJmMTdmOGZhYTFhMDAwNDY4M2Y2OGJhNjgzMjJjIn0%3D; expires=Wed, 09-Jun-2021 14:16:48 GMT; Max-Age=7200; path=/; httponly; samesite=lax

reinink commented 3 years ago

And the body?

fengzi91 commented 3 years ago

{
    "component": "user/register", 
    "props": {
        "errors": {
            "phone": "phone error", 
            "captcha": "captch error"
        }
    }, 
    "url": "/register", 
    "version": "b88130e1b7b4f22ec36961f3f2596e02"
}

fengzi91 commented 3 years ago

Here is an example that can reproduce the error https://github.com/fengzi91/inertia-laravel

fengzi91 commented 3 years ago

😂 I changed the axios response, but forgot to use axios.create(), so I got this error

reinink commented 3 years ago

Glad you got it figured out. 👍

inertiajs / inertia-laravel

got a javascript TypeError `Cannot read property 'x-inertia' of undefined` #274