Error on every requests with the vue.js part

[GrayR0ot]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [ ] I am running the latest version: YES
• [ ] I checked the documentation and found no answer: YES
• [ ] I checked to make sure that this issue has not already been filed: YES
• [ ] I'm reporting the issue to the correct repository (for multi-repository projects): YES

Issue

I can't login using the provided default form. on /login or /register URL

Failure Logs

127.0.0.1-1616619415719.log

127.0.0.1-1616619274431.log

[teamupdivision]

Hi there @GrayR0ot,

Thank you for using Creative Tim products and for reporting the issue.

Could you please check and let us know if the API project server was running?

All the best, Updivision Team

[GrayR0ot]

Yes of course he was. I could access the welcome page and API routes

[teamupdivision]

Hi @GrayR0ot

Could you please let us know what does your .env file looks like? Also, can you check please if these routes (login and register) are working using Postman? This will allow us to know if the error is related to the frontend or the backend of the project.

Best, Updivision Team

[GrayR0ot]

Hi,

Here is my .env file:

env file.txt

And yes routes were working I tested them using post API tests online

[teamupdivision]

Hi @GrayR0ot,

Thank you very much. Could you please send the .env for the frontend too please?

Best, Updivision Team

[GrayR0ot]

Yes, of course, here is the front end .env file

frontend .env file.txt

[GrayR0ot]

I think there problem is from there: https://github.com/creativetimofficial/vue-argon-dashboard-laravel/blob/5ec1135b9ff356d76d54190c72deeeef91ca489b/laravel-json-api/app/Http/Controllers/Api/V1/Auth/LoginController.php

[teamupdivision]

Hi @GrayR0ot,

Could you also check if the payload sent is following the structure below please?

{ "data": { "type": "token", "attributes": { "email": "admin@jsonapi.com", "password": "secret" } } }

Please let us know.

Best, UPDIVISION Team

[GrayR0ot]

From the vueJs app or by the laravel API?

I tested the laravel API, it's working fine. So the problem is from vueJs

[teamupdivision]

Hi @GrayR0ot,

Thank you. That's correct, the problem comes from the vue project. Can you tell us what payload is sent from the front project to API on the login route please?

Can you also look in the network and give us a screenshot/video with the payload that is sent?

Best, UPDIVISION Team

[GrayR0ot]

I checked yesterday, the problem is that the Payload is not sent. I'm not receiving any requests from the laravel API. And In my network pane I can't see any requests outgoing from front end app. I used console.log to check if LARAVEL_APP_API_URL was true and it was.

[teamupdivision]

Hi @GrayR0ot,

Thanks for the details. We would also want to check if you use php artisan serve?

If yes, please use a proper multi-threaded web server such as Apache or Nginix to serve the backend application. Do not use php artisan serve as it will result in stalled requests due to the single-threaded nature of the built-in PHP web server. We strongly recommend using Laradock or Laragon if possible.

Please let us know if this worked.

Best, UPDIVISION Team

[GrayR0ot]

I'm using Apache2 on a dedicated server OVH DC based

https://sperk.grayroot.eu/

[teamupdivision]

Hi @GrayR0ot,

Thank you. Here is a recording with the steps followed and what is displayed when trying to reproduce that. Could you please take a look and let us know if this looks the same for you and if not, send to us a recording with what you're getting? We think this will help a lot. https://drive.google.com/file/d/159VkB9qIbclWdXqTfcFhVgg-A5DUei90/view?usp=sharing

Best, UPDIVISION Team

[GrayR0ot]

Here is the video of what am I getting. It like the frontend never send request to the laravel API. But my .env is right https://www.youtube.com/watch?v=g3cOTvf7QT4

[teamupdivision]

Hi @GrayR0ot,

Thank you. We think this is related to the following steps that should be followed: In the .env file from the API project, it should be replaced and correlated the APP_URL (For example: APP_URL=http://laravel-json-api.test/), while in .env file on front it will be connected to the API through VUE_APP_API_BASE_URL (for exemple: VUE_APP_API_BASE_URL=http://laravel-json-api.test/api/v1)

Please let us know if this helped.

Best, UPDIVISION Team

[GrayR0ot]

Here is my top of .env in Laravel API:

APP_NAME=Laravel APP_ENV=local APP_KEY=base64:rQh2t5drX5jQCDwhqbjgrx5Eo1K7KWHocLSt0rde624= APP_DEBUG=true APP_URL=https://sperk.grayroot.eu

Here is my vue .env file:

VUE_APP_BASE_URL=http://5.196.76.179:8080/ VUE_APP_API_BASE_URL=https://sperk.grayroot.eu/api/v1 VUE_APP_API_KEY= VUE_APP_IS_DEMO=

[GrayR0ot]

The error is:

`[Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'data' of undefined"

found in

---> at src/views/Login.vue

at src/layout/AuthLayout.vue at src/App.vue warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 eval @ vue.runtime.esm.js?2b0e:1856 Promise.catch (async) invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1856 invoker @ vue.runtime.esm.js?2b0e:2179 original._wrapper @ vue.runtime.esm.js?2b0e:6917 vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'data' of undefined at _callee$ (Login.vue?7463:122) at tryCatch (runtime.js?96cf:63) at Generator.invoke [as _invoke] (runtime.js?96cf:293) at Generator.eval [as next] (runtime.js?96cf:118) at asyncGeneratorStep (asyncToGenerator.js?1da1:3) at _next (asyncToGenerator.js?1da1:25) at eval (asyncToGenerator.js?1da1:32) at new Promise () at eval (asyncToGenerator.js?1da1:21) at VueComponent.handleSubmit (Login.vue?7463:97)` On `return vueAuth.login(payload.user, payload.requestOptions).then(response => { context.commit("isAuthenticated", { isAuthenticated: vueAuth.isAuthenticated() }); router.push({path: '/dashboard'}); });`

[teamupdivision]

Hi @GrayR0ot,

Thanks for sharing the details. We've pushed a fix to this problem.

You can access it by downloading the product from the downloads section in the Creative Tim website or from here: https://github.com/creativetimofficial/vue-argon-dashboard-laravel/commit/fd1e89a689baf9be71bcdf6634758c85af16eeb1

Please let us know if all works well now and there is anything else we can help with.

All the best, UPDIVISION Team

[Fiosandi]

@GrayR0ot hey you got things fixed? im facing similar trouble as yours. could you provide the solution? i just pulled it yesterday after the @teamupdivision pushed a fix. but yeah im still running the same trouble. Thanks

[GrayR0ot]

I just downloaded the new update, it's the same for me @Fiosandi @teamupdivision

[teamupdivision]

Hi @GrayR0ot and @Fiosandi,

Thanks for letting us know. Did you also do the "npm install"? Please let us know.

Thank you,

UPDIVISON Team

[Fiosandi]

yeah i did do that. well okay then lets just wait the mighty @teamupdivision fixing the problems

[GrayR0ot]

Yes after downloading the update I updated my packages.

[teamupdivision]

Hi @GrayR0ot,

What is the behaviour and the error after downloading the update? Could you send screenshots of what you're getting now, please?

Best, UPDIVISION Team

[GrayR0ot]

I'm having exactly the same error and same problem. Is the update only a package.json change ? Or did I downloaded the wrong update?

[Fiosandi]

same with me actually @GrayR0ot @teamupdivision

[teamupdivision]

Hi @GrayR0ot and @Fiosandi,

Can you please check the latest commit we did in this Github repository? https://github.com/creativetimofficial/vue-argon-dashboard-laravel/commit/6590caf07348164f1d491f3c0833fa7a5fee5740#diff-78dceccf9a556f537bc4beea06ef842ff52954712ccde9a15e88024e8042b861

It looks like we were not able to reproduce the error. Could you please run the project, login, and then send to us a screenshot of the expanded object in your console? This will help to understand exactly the cause.

Also, just wanted to double check if you deleted the package.lock and the node modules before installing the new update?

Thanks, UPDIVISION Team

[GrayR0ot]

Firstly, yes I removed everything before the update to make sure having the correct one.

And here are the logs with latest update:

127.0.0.1-1618058543515.log

[teamupdivision]

Hi @GrayR0ot,

We've pushed another fix to this problem.

Could you please download this again? Let us know if everything works ok.

All the best, UPDIVISION Team

[Cemoche]

Hi @teamupdivision , seems like the issue is not fixed, I'm getting a similar issue. When the login request is send from Vue, the request is Accepted, but no response is given. I had to add 'timeout' => 15, option to the Guzzle request, if not this makes my server 'block' on the request : The request is Accepted, but never close.

I also tried to change from laragon to UwAmp, same issue. Tried to change my browser same issue.

Made a simple .php file which runs the exact same request as in the Controller and it worked. Also working through Postman.

Here's the stacktrace of the error from laravel logs : https://justpaste.it/3elny Fyi, if i do not set the timeout option, the request keeps running, and I'll never get any logs and just block my server.

Asked to as friend to try to install the project and he got the same issue.

Edit : Getting the same error on all of your Laravel projects

Thanks.

[campi11]

Same problem here, i can't login, i try different vue laravel projets, same problem

EDIT: Solved, using laragon and configured:

APP_URL=http://localhost/

VUE_APP_BASE_URL=http://localhost:8080/ VUE_APP_API_BASE_URL=http://localhost/api/v1

[teamupdivision]

Hello, please open another issue if you are still having similar problems, thank you.