$page.props goes missing in Vite dev mode
#826
Comments
|
I have the same exact issue. Using Vite + Inertia/Svelte, the $page object is empty in dev mode, but correctly populated with data in build mode. Using Any thoughts or progress on this one? |
|
@pedroborges I've found an app I can share that is up to date and reproduces the issue: https://github.com/burlesona/vite-svelte-inertia-bug In vite dev mode you'll see $page is {} but after vite build it works correctly. I've asked the vite-svelte team to look as well: sveltejs/vite-plugin-svelte#175 |
|
Hi, @pedroborges. I've been working on this issue along with @Hassan-Zahid for the past week and we can't figure out why this behavior is different in dev and prod. The team at CoSell is currently building the next version of our app around Inertia, and this bug basically means we can't use a lot of the good stuff from Inertia (flash, forms, errors) because $page is always an empty object in dev mode. We'd really love to get to the bottom of this one, but use your help. Is there anything we can do to work on this together and hopefully solve it? |
|
@kematzy @pedroborges @reinink I tried fixing this with some changes to inertia-svelte and found something more surprising: after I made a local copy and pointed at it via As far as I can tell this means that simply keeping a local fork of inertia and linking it into your project is a viable workaround for the bug. But it's still a very mysterious bug. |
|
I helped @burlesona fix this issue on his app. I was able to narrow the cause down to these two things:
Doing just one of the above won't fix it. I'll add a note for this in the docs. |
|
Any idea what is causing this behavior? I have to delete my node_modules / lock file several times a day. Did you just run the commands once and it stuck? @pedroborges |
|
@kro-dev, we haven't had this issue since applying the fix suggested above. It's been about 2 months now. I'm sure if it has any relation with this issue but we also have this setting in our optimizeDeps: {
include: ['@inertiajs/inertia'],
},These are the versions we are running: "@sveltejs/vite-plugin-svelte": "^1.0.0-next.31",
"svelte": "^3.44.0",
"vite": "^2.7.0",
"@inertiajs/inertia": "^0.10.1",
"@inertiajs/inertia-svelte": "^0.7.4" |
|
Any updates on this? Issue still seems to be present and the fix above isn’t working for me:) |
@wsandy1 same thing happened to me, but the solution provided by @pedroborges works for me.
|
This bug was making me crazy. I am new to this trio stack vite+svelte+inertia. And I was confident that mistake is most likely on my side. But after digging all docs, examples and demos I just couldn't find logical reason why Updating plugin config solved this issue. Thank you a lot! Still, this looks like a dirty solution and should be addressed with some proper fix, so there are no need for such specific plugin config. Or at least it should be mentioned in docs. |
|
For anyone reading this issue in November 2022 or later, svelte({
prebundleSvelteLibraries: true,
}), |
|
In |
|
I am also having the same issue, unfortunately adding the |
|
I'm having this issue, but in reverse. $page.props is populated during development mode (vite), but returns undefined during production (build). |
1 similar comment
|
I'm having this issue, but in reverse. $page.props is populated during development mode (vite), but returns undefined during production (build). |
|
I am also having the same issue :( |
|
In my test using webpack, the warnings do not appear. |
|
any solution for laravel with vue2? |
|
Hey! any solution on vite? |
Versions:
@inertiajs/inertiaversion: ^0.9.2@inertiajs/inertia-svelteversion: ^0.7.3@inertiajs/progressversion: ^0.2.4with:
viteversion: ^2.4.3@sveltejs/vite-plugin-svelteversion: ^1.0.0-next.14svelteversion: ^3.40.0using:
nodeversion: 14.15.0 on a Linux Mint 20 system.Describe the problem:
In Vite live development (
vite) mode the$page.propsvariable goes missing, but is present and working as expected in 'production' (vite build) mode.Please see this video where I have tried to illustrate the issue as clearly as possible.
Due to the missing
$pagevariable, despite being imported in theLayout.sveltefile, no authenticated pages works.This problem is not present in the Vue version with very similar code and Vite setup. I therefore assume the
@inertiajs/inertia-sveltepackage could be the issue.I have tried to figure out what is causing the problem, but I have been unable to do so.
Steps to reproduce:
Once the app is installed, execute
npm run buildto generate the build files.Open the website in your browser and then login and see that the pages are working.
Log out BEFORE the next step!
With the website open, execute
npm run devand reload the Login page. Observe the console log output in your browser.Edit the
Login.sveltefile with your code editor and see the live updates in the browser.Click on the "Login" button and observe the crash with this output:
The error -
TypeError: Cannot read property 'auth' of undefinedrefers to the first use of the missing$page.props.authvariable.I hope this information is sufficient to work out what the issue is and fix it.
Please feel free to ask for my assistance if required.
Thanks for your time and attention.
=======================
Background
I have forked and updated the Ping CRM Svelte code base to be on par with the Vue version as well as support PHP 8.
I additionally created a Vite branch of the app that uses Vite JS instead of the default Webpack / Mix setup.
The Vite version works both in 'Dev'
npm run devmode with superfast browser updates, and in the 'Build'npm run build / productionmode.However, in 'Dev' mode the
$pagevariable is suddenly not available and this prevents authenticated pages from working.I have done at lot of trying with various configuration options / settings, but have not managed to overcome the issue.
Debug output
Using built (production mode) pages
Console output in Vite 'Production' mode, when visiting the main page, and logging in.
The
[DEBUG]:output comes from aconsole.log('$page => ', $page)at the end of the<script>section in theLayout.sveltefile.Using
npm run dev(development mode) loading the login pageConsole output in Vite 'Dev' mode, when (re)loading the login page.
Using
npm run dev(development mode) related to HMR updates of the login page codeUsing
npm run dev(development mode) AFTER clicking on the "Login" buttonThe text was updated successfully, but these errors were encountered: