Laravel 5.3 Passport - Vue error: Error when evaluating expression

Question

This is giving me a headache for the past two days. I recently updated my laravel application to 5.3, on my local environment I pulled in Laravel/passport. After the installation, everything works as expected.

When I push this update to the production server, everything still works, but vue throws me errors on the passport components. I am still very new to vue and I can't find what is causing this.

The last thing I tried was bringing up a fresh install of Laravel and passport on the production server, which results in the same errors. When I push this installation to my local machine, everything works. I gues this is some kind of dependency error.

These are the errors:

[Vue warn]: Error when evaluating expression "token.scopes.length > 0": TypeError: Cannot read property 'length' of undefined (found in component: <passport-authorized-clients>)
[Vue warn]: Error when evaluating expression "token.client.name": TypeError: Cannot read property 'name' of undefined (found in component: <passport-authorized-clients>)
[Vue warn]: Error when evaluating expression "token.scopes.length > 0": TypeError: Cannot read property 'length' of undefined (found in component: <passport-authorized-clients>)
[Vue warn]: Error when evaluating expression "token.client.name": TypeError: Cannot read property 'name' of undefined (found in component: <passport-authorized-clients>)

Has anyone faced the same errors, and how do I fix this?

EDIT: I managed to fix this. I updated php5.6 to php7 and installed the following PHP modules; libgmp-dev, php-gmp. When I did a fresh install again, npm complained about two depencies that passport required; mdanter/ecc and indigophp/hash-compat

Answer 1

I have had the same problem. The solution here helped me. It suggests adding the following to resources/assets/js/bootstrap.js:

Vue.http.interceptors.push((request, next ) => {
    next((response) => {
        if( 'Content-Type' in response.headers 
            && response.headers['Content-Type'] == 'application/json' ){
            if( typeof response.data != 'object' ){
                response.data = JSON.parse( response.data );
            }
        }

        if( 'content-type' in response.headers
            && response.headers['content-type'] == 'application/json' ){
            if( typeof response.data != 'object' ){
                response.data = JSON.parse( response.data );
            }
        }
    });
});