search

rahulhaque / laravel-filepond-vue-inertia-example

Laravel FilePond Jetstream Vue Inertia demo project.
MIT License
19 stars 5 forks source link

Blank screen seen at /dashboard after login, with errors in console #3

Closed connecteev closed 1 year ago

connecteev commented 1 year ago

Blank screen seen after login, with errors in console

Steps:

  1. Went through all the installation steps here: https://github.com/rahulhaque/laravel-filepond-vue-inertia-example#installation
  2. (In doing so, I updated the composer packages to get this repo working with laravel 10.x, see: https://github.com/rahulhaque/laravel-filepond-vue-inertia-example/issues/2)
  3. Logged into the app at http://localhost:8000/login with admin@email.com / password
  4. I am taken to http://rahulhaque_laravel_filepond_vue_inertia_example.test/dashboard where I see a blank white screen, with the following error message in console: 
    GET http://localhost:3000/browser-sync/browser-sync-client.js net::ERR_CONNECTION_REFUSED
app.js:9055 [Vue warn]: Unhandled error during execution of setup function 
at <Dashboard jetstream= {canCreateTeams: false, canManageTwoFactorAuthentication: true, canUpdatePassword: true, canUpdateProfileInformation: true, hasEmailVerification: false, …} auth= {user: {…}} errorBags= []  ... > 
at <Inertia initialPage= {component: 'Dashboard', props: {…}, url: '/dashboard', version: '207fd484b7c2ceeff7800b8c8a11b3b6'} initialComponent= {__name: 'Dashboard', props: {…}, __file: 'resources/js/Pages/Dashboard.vue', setup: ƒ, render: ƒ, …} resolveComponent=fn<h>  ... > 
at <App>
warn @ app.js:9055
logError @ app.js:9230
handleError @ app.js:9222
callWithErrorHandling @ app.js:9174
setupStatefulComponent @ app.js:16223
setupComponent @ app.js:16184
mountComponent @ app.js:14588
processComponent @ app.js:14554
patch @ app.js:14042
componentUpdateFn @ app.js:14697
run @ app.js:7804
instance.update @ app.js:14803
setupRenderEffect @ app.js:14811
mountComponent @ app.js:14601
processComponent @ app.js:14554
patch @ app.js:14042
componentUpdateFn @ app.js:14697
run @ app.js:7804
instance.update @ app.js:14803
setupRenderEffect @ app.js:14811
mountComponent @ app.js:14601
processComponent @ app.js:14554
patch @ app.js:14042
render @ app.js:15321
mount @ app.js:12832
app.mount @ app.js:18314
setup @ app.js:27121
(anonymous) @ app.js:10
Promise.then (async)
exports.createInertiaApp @ app.js:10
./resources/js/app.js @ app.js:27101
__webpack_require__ @ app.js:69720
(anonymous) @ app.js:69890
__webpack_require__.O @ app.js:69757
(anonymous) @ app.js:69892
(anonymous) @ app.js:69894
app.js:22910 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
at setup (app.js:22910:24)
at callWithErrorHandling (app.js:9172:18)
at setupStatefulComponent (app.js:16223:25)
at setupComponent (app.js:16184:36)
at mountComponent (app.js:14588:7)
at processComponent (app.js:14554:9)
at patch (app.js:14042:11)
at ReactiveEffect.componentUpdateFn [as fn] (app.js:14697:11)
at ReactiveEffect.run (app.js:7804:19)
at instance.update (app.js:14803:51)

image

rahulhaque commented 1 year ago

@connecteev did it run fine without composer update?

connecteev commented 1 year ago

@rahulhaque it wasn't installing without composer update (and making the changes I did in #2 )

composer install
Installing dependencies from lock file (including require-dev)
Verifying lock file contents can be installed on current platform.
Your lock file does not contain a compatible set of packages. Please run composer update.

  Problem 1
    - inertiajs/inertia-laravel is locked to version v0.5.4 and an update of this package was not requested.
    - inertiajs/inertia-laravel v0.5.4 requires php ^7.2|~8.0.0|~8.1.0 -> your php version (8.2.9) does not satisfy that requirement.
  Problem 2
    - nette/schema is locked to version v1.2.2 and an update of this package was not requested.
    - nette/schema v1.2.2 requires php >=7.1 <8.2 -> your php version (8.2.9) does not satisfy that requirement.
  Problem 3
    - nette/schema v1.2.2 requires php >=7.1 <8.2 -> your php version (8.2.9) does not satisfy that requirement.
    - league/config v1.1.1 requires nette/schema ^1.2 -> satisfiable by nette/schema[v1.2.2].
    - league/config is locked to version v1.1.1 and an update of this package was not requested.

After deleting composer.lock:


composer install
No composer.lock file present. Updating dependencies to latest instead of installing from lock file. See https://getcomposer.org/install for more information.
Loading composer repositories with package information
Info from https://repo.packagist.org: #StandWithUkraine
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires inertiajs/inertia-laravel ^0.5.2 -> satisfiable by inertiajs/inertia-laravel[v0.5.2, v0.5.3, v0.5.4].
    - inertiajs/inertia-laravel[v0.5.2, ..., v0.5.4] require php ^7.2|~8.0.0|~8.1.0 -> your php version (8.2.9) does not satisfy that requirement.
connecteev commented 1 year ago

@rahulhaque any idea how to fix this? I need an implementation of laravel with filepond and I'd love to use your repo if I can get it working.

rahulhaque commented 1 year ago

@connecteev I've just downloaded the repo and followed the setup instructions in the readme. No errors found during installation and the project is running fine. I couldn't reproduce any of the errors you mentioned. What is your composer and npm version?

Edit: You should try with PHP version 8.1. If you want to make this work with latest PHP and laravel versions, then copy paste the logic from three files mentioned in the readme after installing all the dependencies.

connecteev commented 1 year ago 
composer --version
Composer version 2.5.5 2023-03-21 11:50:05

npm --version
9.8.0

php --version
PHP 8.2.9 (cli) (built: Aug 22 2023 13:42:30) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.9, Copyright (c) Zend Technologies
    with Zend OPcache v8.2.9, Copyright (c), by Zend Technologies

Steps:

  1. git clone git@github.com:rahulhaque/laravel-filepond-vue-inertia-example.git rahulhaque_laravel_filepond_vue_inertia_example_testing
  2. cd rahulhaque_laravel_filepond_vue_inertia_example_testing
  3. cp .env.example .env
  4. update mysql db credentials

  5. composer install

    Installing dependencies from lock file (including require-dev)
Verifying lock file contents can be installed on current platform.
Your lock file does not contain a compatible set of packages. Please run composer update.

Problem 1
- inertiajs/inertia-laravel is locked to version v0.5.4 and an update of this package was not requested.
- inertiajs/inertia-laravel v0.5.4 requires php ^7.2|~8.0.0|~8.1.0 -> your php version (8.2.9) does not satisfy that requirement.
Problem 2
- nette/schema is locked to version v1.2.2 and an update of this package was not requested.
- nette/schema v1.2.2 requires php >=7.1 <8.2 -> your php version (8.2.9) does not satisfy that requirement.
Problem 3
- nette/schema v1.2.2 requires php >=7.1 <8.2 -> your php version (8.2.9) does not satisfy that requirement.
- league/config v1.1.1 requires nette/schema ^1.2 -> satisfiable by nette/schema[v1.2.2].
- league/config is locked to version v1.1.1 and an update of this package was not requested.

Remove composer.lock and Try again:

rm composer.lock composer install

Output:

No composer.lock file present. Updating dependencies to latest instead of installing from lock file. See https://getcomposer.org/install for more information.
Loading composer repositories with package information
Info from https://repo.packagist.org: #StandWithUkraine
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires inertiajs/inertia-laravel ^0.5.2 -> satisfiable by inertiajs/inertia-laravel[v0.5.2, v0.5.3, v0.5.4].
    - inertiajs/inertia-laravel[v0.5.2, ..., v0.5.4] require php ^7.2|~8.0.0|~8.1.0 -> your php version (8.2.9) does not satisfy that requirement.
rahulhaque commented 1 year ago

@connecteev I've updated the dependencies. Can you please redownload the repo and try again? Let me know of the result.

connecteev commented 1 year ago

@rahulhaque composer install works beautifully. npm install also works well, although I am seeing the following warnings. Just FYI, otherwise feel free to close this issue. Thanks for the fix!

npm install
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm WARN deprecated @babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.

added 890 packages, and audited 891 packages in 5s
rahulhaque commented 1 year ago

@connecteev you're welcome. The error is from npm as I am still using npm 8 and node 16 which is now deprecated but super stable in my opinion. I guess a proper update of the repo and framework will remove these warnings. Thank you.

connecteev commented 1 year ago

@rahulhaque Thank you, and makes sense. Would be great if all the packages (composer and npm) could be updated to use the latest laravel 10, inertia 1.x, and Vite (instead of Mix). It would make integration that much easier.