Upgrading Jetstream 2.0 - form.transform is not a function

talelmishali commented 3 years ago

Jetstream Version: 2.0.0
Jetstream Stack: Inertia
Uses Teams: no
Laravel Version: 8.12
PHP Version: 8.0.0
Database Driver & Version: MySql 8.0.0

Description: Jetstream login page error after clicking Login button:

app.js:57981 [Vue warn]: Error in v-on handler: "TypeError: this.form.transform is not a function"

found in

---> <Login> at resources/js/Pages/Auth/Login.vue

Steps To Reproduce:

List of the installed version before the problem (all works fine)

Composer.json
- "laravel/jetstream": "^1.6",
Package.json
- "@inertiajs/inertia": "^0.3.0",
- "@inertiajs/inertia-vue": "^0.2.0",

Upgrading

Following Jetstream Upgrade.md

php artisan vendor:publish --tag=jetstream-views
Updating Composer.json : "laravel/jetstream": "^2.0"
composer update
php artisan vendor:publish --tag=jetstream-inertia-auth-pages
- Updating Package.json:
  - "@inertiajs/inertia": "^0.8.2",
  - "@inertiajs/inertia-vue": "^0.5.4",
- npm install
- npm run dev
- Updating app.js
```
import {
App as InertiaApp,
plugin as InertiaPlugin
} from "@inertiajs/inertia-vue";
```

Vue.use(InertiaPlugin);


 - ```npm run dev```

Trying to login -> error occurred

Thank you in advance for all the great work you guys doing!

brianclogan commented 3 years ago

Same issue, I just temporarily removed the remember option from the form and commented out the transform.

ks217 commented 3 years ago

I am facing the same issue although I did not update anything in package.json and app.js.

I tried deleting node_modules and package_lock.json and clearing npm cache before npm install. But it didn't work.

I am also getting this error on loading the login and register pages:

[Vue warn]: Error in render: "TypeError: Cannot read property 'errors' of undefined"
found in
---> <JetValidationErrors> at resources/js/Jetstream/ValidationErrors.vue
       <JetAuthenticationCard> at resources/js/Jetstream/AuthenticationCard.vue
         <Login> at resources/js/Pages/Auth/Login.vue
           <Inertia>
             <Root>

which points to the line return this.$page.props.errors;

ks217 commented 3 years ago

Which version of @inertiajs/inertia & @inertiajs/inertia-vue you currently have on your package.json ?

@talelmishali

"@inertiajs/inertia": "^0.3.0",
"@inertiajs/inertia-vue": "^0.2.0",

driesvints commented 3 years ago

Upgrading Inertia isn't part of the upgrade guide. Please see the very first part of the guide here: https://github.com/laravel/jetstream/blob/2.x/UPGRADE.md

talelmishali commented 3 years ago

Upgrading Inertia isn't part of the upgrade guide. Please see the very first part of the guide here: https://github.com/laravel/jetstream/blob/2.x/UPGRADE.md

Was sure I followed the Inertia upgrade, solved. Thanks!

NicTorgersen commented 3 years ago

@talelmishali did you downgrade inertia and inertia-vue?

talelmishali commented 3 years ago

@talelmishali did you downgrade inertia and inertia-vue?

I did not upgrade instead I just installed Jetstream 2.0.3 from scratch.

NicTorgersen commented 3 years ago

@talelmishali Can you share your package.json and app.js? I don't think I can reinstall Jetstream from scratch.

talelmishali commented 3 years ago

@talelmishali Can you share your package.json and app.js? I don't think I can reinstall Jetstream from scratch.

Sure. You mean you can not cause it is going to break too much on your app, or literally can not?

If you use it make sure to run composer update for it to downgrade or upgrade as necessary, as well delete the node_modules folder (assuming you did not change anything on the src code of your packages), and then run npm install

Package.json

   "devDependencies": {
        "@inertiajs/inertia": "^0.8.2",
        "@inertiajs/inertia-vue": "^0.5.4",
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        "autoprefixer": "^10.0.2",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "moment": "^2.26.0",
        "portal-vue": "^2.1.7",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "^2.0.1",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "@tailwindcss/line-clamp": "^0.1.0",
        "vue-scrollactive": "^0.9.3",
        "vuedraggable": "^2.24.3"
    }

Composer.json

    "require": {
        "php": "^7.3|^8.0",
        "fideloper/proxy": "^4.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "inertiajs/inertia-laravel": "^0.3.5",
        "laravel/framework": "^8.12",
        "laravel/jetstream": "^2.0.3",
        "laravel/sanctum": "^2.6",
        "laravel/tinker": "^2.5",
        "spatie/laravel-model-status": "^1.10.2",
        "spatie/laravel-permission": "^3.18",
        "tightenco/ziggy": "^1.0"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    },

NicTorgersen commented 3 years ago

@talelmishali I ended up just creating a new project outside my current directory: laravel new app, composer require laravel/jetstream, php artisan jetstream:install inertia --teams and comparing the latest setup with mine, which was grossly outdated (three-four months old, v0.0.3).

Thanks though, biggest hint was the lack of laravel-jetstream in package.json.

Before, in resources/js/app.js, I had

import { InertiaForm } from 'laravel-jetstream'

Vue.use(InertiaForm)

I am pretty sure this is why the transform-method on $inertia.form is undefined. I removed it and it worked fine, apart from some other things unrelated.

BoGnY commented 3 years ago

@talelmishali

Thanks though, biggest hint was the lack of laravel-jetstream in package.json.

Before, in resources/js/app.js, I had
import { InertiaForm } from 'laravel-jetstream'

Vue.use(InertiaForm)
I am pretty sure this is why the transform-method on $inertia.form is undefined. I removed it and it worked fine, apart for some other things unrelated.

Thanks, removing this line fix the problem :+1:

P-James commented 3 years ago

I am facing the same issue although I did not update anything in package.json and app.js.

I tried deleting node_modules and package_lock.json and clearing npm cache before npm install. But it didn't work.

I am also getting this error on loading the login and register pages:
[Vue warn]: Error in render: "TypeError: Cannot read property 'errors' of undefined"
found in
---> <JetValidationErrors> at resources/js/Jetstream/ValidationErrors.vue
       <JetAuthenticationCard> at resources/js/Jetstream/AuthenticationCard.vue
         <Login> at resources/js/Pages/Auth/Login.vue
           <Inertia>
             <Root>
which points to the line return this.$page.props.errors;

@ks217 Your error is the same as mine and is caused by the commit https://github.com/laravel/jetstream/commit/0d6ace001332497611e420630cff05af59309fc3#diff-65e3f79c639dc77d854ece32c7027adc856310b1e2c83272a1b6261b131071f2

I am not confident enough to make a PR undoing this commit. There must be a reason to it as you and I seem to be in the minority with this error. Anyway, replace your ValidationErrors.vue with the original and the error is gone.

<template>
    <div v-if="hasErrors">
        <div class="font-medium text-red-600">Whoops! Something went wrong.</div>

 <ul class="mt-3 list-disc list-inside text-sm text-red-600">
            <li v-for="(error, key) in flattenedErrors" :key="key">{{ error }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            bag: {
                type: String,
                default: 'default',
            },
        },
        computed: {
            errorBag() {
                return this.$page.props.errorBags[this.bag] || {}
            },
            hasErrors() {
                return Object.keys(this.errorBag).length > 0;
            },
            flattenedErrors() {
                return Object.keys(this.errorBag).reduce((carry, key) => carry.concat(this.errorBag[key]), [])
            }
        }
    }
</script>

P-James commented 3 years ago

@ks217 Don't do the above. There is a step in an inertia upgrade that is the real cause of the problem. Have a look at the HandleInertiaRequests middleware. https://inertiajs.com/server-side-setup#middleware

I missed this as I upgraded from a very early version to latest, it must've slipped through the net.

ks217 commented 3 years ago

@P-James I was only trying out jetstream inertia/vue to see how it works, so I haven't looked back at this. Like others creating a new project from scratch had fixed this issue for me.

Thanks though for sharing what you found. Appreciate it :) 👍

laravel / jetstream