inertia: `$page.props` goes missing in Vite dev mode

Versions:

  • @inertiajs/inertia version: ^0.9.2
  • @inertiajs/inertia-svelte version: ^0.7.3
  • @inertiajs/progress version: ^0.2.4

with:

  • vite version: ^2.4.3
  • @sveltejs/vite-plugin-svelte version: ^1.0.0-next.14
  • svelte version: ^3.40.0

using:

  • node version: 14.15.0 on a Linux Mint 20 system.

Describe the problem:

In Vite live development (vite) mode the $page.props variable 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 $page variable, despite being imported in the Layout.svelte file, 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-svelte package 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:

  1. Clone this Ping CRM Svelte app with Vite support branch and follow the basic install / setup instructions.

  1. Once the app is installed, execute npm run build to generate the build files.

  2. Open the website in your browser and then login and see that the pages are working.

  3. Log out BEFORE the next step!

  4. With the website open, execute npm run dev and reload the Login page. Observe the console log output in your browser.

  5. Edit the Login.svelte file with your code editor and see the live updates in the browser.

  6. Click on the “Login” button and observe the crash with this output:

[DEBUG]:  Layout.svelte:671 $page =>  {}     // NOTE: empty output from `console.log('$page =>', $page)`

[WARNING]:  <Layout> was created with unknown prop 'errors'  --  Layout.svelte:675
[WARNING]:  <Layout> was created with unknown prop 'auth'    --  Layout.svelte:675
[WARNING]:  <Layout> was created with unknown prop 'flash'   --  Layout.svelte:675

[HMR][Svelte] Unrecoverable error in <Layout>: next update will trigger a full reload  --  proxy.js:15

Layout.svelte:386 Uncaught (in promise) TypeError: Cannot read property 'auth' of undefined
    at create_fragment (Layout.svelte:386)
    at init (index.mjs?v=a6cd7c47:1792)
    at new Layout (Layout.svelte:703)
    at createProxiedComponent (svelte-hooks.js:245)
    at new ProxyComponent (proxy.js:239)
    at new Proxy<Layout> (proxy.js:339)
    at Object.update [as p] (Render.svelte:107)
    at Object.update [as p] (Render.svelte:326)
    at update (index.mjs?v=a6cd7c47:1044)
    at flush (index.mjs?v=a6cd7c47:1012)

The error - TypeError: Cannot read property 'auth' of undefined refers to the first use of the missing $page.props.auth variable.

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 dev mode with superfast browser updates, and in the ‘Build’ npm run build / production mode.

However, in ‘Dev’ mode the $page variable 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 a console.log('$page => ', $page) at the end of the <script> section in the Layout.svelte file.

Navigated to http://pingcrm-svelte-vite.test/

[DEBUG]:  Layout.1487d4e2.js:25 $page => {component: "Dashboard/Index", props: {…}, url: "/", version: "", scrollRegions: Array(0), …}

Using npm run dev (development mode) loading the login page

Console output in Vite ‘Dev’ mode, when (re)loading the login page.

Navigated to http://pingcrm-svelte-vite.test/

client:180 [vite] connecting...
client:202 [vite] connected.

[WARNING]:  <App> was created with unknown prop 'initialComponent'  --  App.svelte:107

  (anonymous)                           @ App.svelte:107
  instance                              @ App.svelte:106
  init                                  @ index.mjs?v=a6cd7c47:1777
  App                                   @ App.svelte:164
  createProxiedComponent                @ svelte-hooks.js:245
  ProxyComponent                        @ proxy.js:239
  Proxy<App>                            @ proxy.js:339
  setup                                 @ app.js:31
  (anonymous)                           @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                      @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                           @ app.js:19


[WARNING]:  <App> was created with unknown prop 'onHeadUpdate'  --  App.svelte:107

  (anonymous)                           @ App.svelte:107
  instance                              @ App.svelte:106
  init                                  @ index.mjs?v=a6cd7c47:1777
  App                                   @ App.svelte:164
  createProxiedComponent                @ svelte-hooks.js:245
  ProxyComponent                        @ proxy.js:239
  Proxy<App>                            @ proxy.js:339
  setup                                 @ app.js:31
  (anonymous)                           @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                      @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                           @ app.js:19


[WARNING]:  <Render> was created without expected prop 'component'  --  Render.svelte:440

  createProxiedComponent                @ svelte-hooks.js:245
  ProxyComponent                        @ proxy.js:239
  Proxy<Render>                         @ proxy.js:339
  create_fragment                       @ App.svelte:36
  init                                  @ index.mjs?v=a6cd7c47:1792
  App                                   @ App.svelte:164
  createProxiedComponent                @ svelte-hooks.js:245
  ProxyComponent                        @ proxy.js:239
  Proxy<App>                            @ proxy.js:339
  setup                                 @ app.js:31
  (anonymous)                           @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                      @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                           @ app.js:19


[WARNING]:  <Login> received an unexpected slot "default".  --  index.mjs?v=a6cd7c47:1969

  validate_slots                        @ index.mjs?v=a6cd7c47:1969
  instance                              @ Login.svelte:494
  init                                  @ index.mjs?v=a6cd7c47:1777
  Login                                 @ Login.svelte:586
  createProxiedComponent                @ svelte-hooks.js:245
  ProxyComponent                        @ proxy.js:239
  Proxy<Login>                          @ proxy.js:339
  create_if_block                       @ Render.svelte:65
  update                                @ Render.svelte:332
  update                                @ index.mjs?v=a6cd7c47:1044
  flush                                 @ index.mjs?v=a6cd7c47:1012
  Promise.then (async)
  schedule_update                       @ index.mjs?v=a6cd7c47:987
  make_dirty                            @ index.mjs?v=a6cd7c47:1745
  (anonymous)                           @ index.mjs?v=a6cd7c47:1783
  (anonymous)                           @ App.svelte:87
  set                                   @ index.mjs?v=a6cd7c47:34
  update                                @ index.mjs?v=a6cd7c47:42
  swapComponent                         @ App.svelte:96
  (anonymous)                           @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                            @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  n2.handleInitialPageVisit             @ chunk-VDHBNV5C.js?v=a6cd7c47:2933
  n2.init                               @ chunk-VDHBNV5C.js?v=a6cd7c47:2931
  instance                              @ App.svelte:92
  init                                  @ index.mjs?v=a6cd7c47:1777
  App                                   @ App.svelte:164
  createProxiedComponent                @ svelte-hooks.js:245
  ProxyComponent                        @ proxy.js:239
  Proxy<App>                            @ proxy.js:339
  setup                                 @ app.js:31
  (anonymous)                           @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                      @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                           @ app.js:19


[WARNING]:  <Login> was created with unknown prop 'errors'  --  Login.svelte:513

  (anonymous)                             @ Login.svelte:513
  instance                                @ Login.svelte:512
  init                                    @ index.mjs?v=a6cd7c47:1777
  Login                                   @ Login.svelte:586
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<Login>                            @ proxy.js:339
  create_if_block                         @ Render.svelte:65
  update                                  @ Render.svelte:332
  update                                  @ index.mjs?v=a6cd7c47:1044
  flush                                   @ index.mjs?v=a6cd7c47:1012
  Promise.then (async)
  schedule_update                         @ index.mjs?v=a6cd7c47:987
  make_dirty                              @ index.mjs?v=a6cd7c47:1745
  (anonymous)                             @ index.mjs?v=a6cd7c47:1783
  (anonymous)                             @ App.svelte:87
  set                                     @ index.mjs?v=a6cd7c47:34
  update                                  @ index.mjs?v=a6cd7c47:42
  swapComponent                           @ App.svelte:96
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                              @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  n2.handleInitialPageVisit               @ chunk-VDHBNV5C.js?v=a6cd7c47:2933
  n2.init                                 @ chunk-VDHBNV5C.js?v=a6cd7c47:2931
  instance                                @ App.svelte:92
  init                                    @ index.mjs?v=a6cd7c47:1777
  App                                     @ App.svelte:164
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<App>                              @ proxy.js:339
  setup                                   @ app.js:31
  (anonymous)                             @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                        @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                             @ app.js:19


[WARNING]:  <Login> was created with unknown prop 'auth'  --  Login.svelte:513

  (anonymous)                             @ Login.svelte:513
  instance                                @ Login.svelte:512
  init                                    @ index.mjs?v=a6cd7c47:1777
  Login                                   @ Login.svelte:586
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<Login>                            @ proxy.js:339
  create_if_block                         @ Render.svelte:65
  update                                  @ Render.svelte:332
  update                                  @ index.mjs?v=a6cd7c47:1044
  flush                                   @ index.mjs?v=a6cd7c47:1012
  Promise.then (async)
  schedule_update                         @ index.mjs?v=a6cd7c47:987
  make_dirty                              @ index.mjs?v=a6cd7c47:1745
  (anonymous)                             @ index.mjs?v=a6cd7c47:1783
  (anonymous)                             @ App.svelte:87
  set                                     @ index.mjs?v=a6cd7c47:34
  update                                  @ index.mjs?v=a6cd7c47:42
  swapComponent                           @ App.svelte:96
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                              @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  n2.handleInitialPageVisit               @ chunk-VDHBNV5C.js?v=a6cd7c47:2933
  n2.init                                 @ chunk-VDHBNV5C.js?v=a6cd7c47:2931
  instance                                @ App.svelte:92
  init                                    @ index.mjs?v=a6cd7c47:1777
  App                                     @ App.svelte:164
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<App>                              @ proxy.js:339
  setup                                   @ app.js:31
  (anonymous)                             @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                        @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                             @ app.js:19


[WARNING]:  <Login> was created with unknown prop 'flash'  --  Login.svelte:513

  (anonymous)                             @ Login.svelte:513
  instance                                @ Login.svelte:512
  init                                    @ index.mjs?v=a6cd7c47:1777
  Login                                   @ Login.svelte:586
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<Login>                            @ proxy.js:339
  create_if_block                         @ Render.svelte:65
  update                                  @ Render.svelte:332
  update                                  @ index.mjs?v=a6cd7c47:1044
  flush                                   @ index.mjs?v=a6cd7c47:1012
  Promise.then (async)
  schedule_update                         @ index.mjs?v=a6cd7c47:987
  make_dirty                              @ index.mjs?v=a6cd7c47:1745
  (anonymous)                             @ index.mjs?v=a6cd7c47:1783
  (anonymous)                             @ App.svelte:87
  set                                     @ index.mjs?v=a6cd7c47:34
  update                                  @ index.mjs?v=a6cd7c47:42
  swapComponent                           @ App.svelte:96
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
  Promise.then (async)
  n2.setPage                              @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  n2.handleInitialPageVisit               @ chunk-VDHBNV5C.js?v=a6cd7c47:2933
  n2.init                                 @ chunk-VDHBNV5C.js?v=a6cd7c47:2931
  instance                                @ App.svelte:92
  init                                    @ index.mjs?v=a6cd7c47:1777
  App                                     @ App.svelte:164
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<App>                              @ proxy.js:339
  setup                                   @ app.js:31
  (anonymous)                             @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                        @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                             @ app.js:19


[WARNING]:  <Login> was created with unknown prop 'debug'  --  Login.svelte:513

  (anonymous)                             @ Login.svelte:513
  instance                                @ Login.svelte:512
  init                                    @ index.mjs?v=a6cd7c47:1777
  Login                                   @ Login.svelte:586
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<Login>                            @ proxy.js:339
  create_if_block                         @ Render.svelte:65
  update                                  @ Render.svelte:332
  update                                  @ index.mjs?v=a6cd7c47:1044
  flush                                   @ index.mjs?v=a6cd7c47:1012
    Promise.then (async)
  schedule_update                         @ index.mjs?v=a6cd7c47:987
  make_dirty                              @ index.mjs?v=a6cd7c47:1745
  (anonymous)                             @ index.mjs?v=a6cd7c47:1783
  (anonymous)                             @ App.svelte:87
  set                                     @ index.mjs?v=a6cd7c47:34
  update                                  @ index.mjs?v=a6cd7c47:42
  swapComponent                           @ App.svelte:96
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                              @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  n2.handleInitialPageVisit               @ chunk-VDHBNV5C.js?v=a6cd7c47:2933
  n2.init                                 @ chunk-VDHBNV5C.js?v=a6cd7c47:2931
  instance                                @ App.svelte:92
  init                                    @ index.mjs?v=a6cd7c47:1777
  App                                     @ App.svelte:164
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<App>                              @ proxy.js:339
  setup                                   @ app.js:31
  (anonymous)                             @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                        @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                             @ app.js:19


[WARNING]:  <TextInput> was created without expected prop 'error'  --  TextInput.svelte:348

  TextInput                               @ TextInput.svelte:348
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<TextInput>                        @ proxy.js:339
  create_fragment                         @ Login.svelte:156
  init                                    @ index.mjs?v=a6cd7c47:1792
  Login                                   @ Login.svelte:586
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<Login>                            @ proxy.js:339
  create_if_block                         @ Render.svelte:65
  update                                  @ Render.svelte:332
  update                                  @ index.mjs?v=a6cd7c47:1044
  flush                                   @ index.mjs?v=a6cd7c47:1012
    Promise.then (async)
  schedule_update                         @ index.mjs?v=a6cd7c47:987
  make_dirty                              @ index.mjs?v=a6cd7c47:1745
  (anonymous)                             @ index.mjs?v=a6cd7c47:1783
  (anonymous)                             @ App.svelte:87
  set                                     @ index.mjs?v=a6cd7c47:34
  update                                  @ index.mjs?v=a6cd7c47:42
  swapComponent                           @ App.svelte:96
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                              @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  n2.handleInitialPageVisit               @ chunk-VDHBNV5C.js?v=a6cd7c47:2933
  n2.init                                 @ chunk-VDHBNV5C.js?v=a6cd7c47:2931
  instance                                @ App.svelte:92
  init                                    @ index.mjs?v=a6cd7c47:1777
  App                                     @ App.svelte:164
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<App>                              @ proxy.js:339
  setup                                   @ app.js:31
  (anonymous)                             @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                        @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                             @ app.js:19


[WARNING]:  <TextInput> was created without expected prop 'error'  --  TextInput.svelte:348

  TextInput                               @ TextInput.svelte:348
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<TextInput>                        @ proxy.js:339
  create_fragment                         @ Login.svelte:174
  init                                    @ index.mjs?v=a6cd7c47:1792
  Login                                   @ Login.svelte:586
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<Login>                            @ proxy.js:339
  create_if_block                         @ Render.svelte:65
  update                                  @ Render.svelte:332
  update                                  @ index.mjs?v=a6cd7c47:1044
  flush                                   @ index.mjs?v=a6cd7c47:1012
  Promise.then (async)
  schedule_update                         @ index.mjs?v=a6cd7c47:987
  make_dirty                              @ index.mjs?v=a6cd7c47:1745
  (anonymous)                             @ index.mjs?v=a6cd7c47:1783
  (anonymous)                             @ App.svelte:87
  set                                     @ index.mjs?v=a6cd7c47:34
  update                                  @ index.mjs?v=a6cd7c47:42
  swapComponent                           @ App.svelte:96
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                              @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  n2.handleInitialPageVisit               @ chunk-VDHBNV5C.js?v=a6cd7c47:2933
  n2.init                                 @ chunk-VDHBNV5C.js?v=a6cd7c47:2931
  instance                                @ App.svelte:92
  init                                    @ index.mjs?v=a6cd7c47:1777
  App                                     @ App.svelte:164
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<App>                              @ proxy.js:339
  setup                                   @ app.js:31
  (anonymous)                             @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1141
    Promise.then (async)
  createInertiaApp                        @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1140
  (anonymous)                             @ app.js:19


[WARNING]:  <Login> received an unexpected slot "default".  --  index.mjs?v=a6cd7c47:1969

  validate_slots                          @ index.mjs?v=a6cd7c47:1969
  instance                                @ Login.svelte?import&t=1627203029117:494
  init                                    @ index.mjs?v=a6cd7c47:1777
  Login                                   @ Login.svelte?import&t=1627203029117:586
  createComponent                         @ svelte-hooks.js:136
  targetCmp.$replace                      @ svelte-hooks.js:183
  refreshComponent                        @ proxy.js:168
  rerender                                @ proxy-adapter-dom.js:77
  (anonymous)                             @ proxy.js:398
  reload                                  @ proxy.js:396
  (anonymous)                             @ hot-api.js:150
  (anonymous)                             @ client:490
  (anonymous)                             @ client:436
  (anonymous)                             @ client:329
  queueUpdate                             @ client:329
    async function (async)
  queueUpdate                             @ client:325
  (anonymous)                             @ client:223
  handleMessage                           @ client:221
  (anonymous)                             @ client:196


[WARNING]:  <Login> was created with unknown prop 'errors'  --  Login.svelte?import&t=1627203029117:513

  (anonymous)                             @ Login.svelte?import&t=1627203029117:513
  instance                                @ Login.svelte?import&t=1627203029117:512
  init                                    @ index.mjs?v=a6cd7c47:1777
  Login                                   @ Login.svelte?import&t=1627203029117:586
  createComponent                         @ svelte-hooks.js:136
  targetCmp.$replace                      @ svelte-hooks.js:183
  refreshComponent                        @ proxy.js:168
  rerender                                @ proxy-adapter-dom.js:77
  (anonymous)                             @ proxy.js:398
  reload                                  @ proxy.js:396
  (anonymous)                             @ hot-api.js:150
  (anonymous)                             @ client:490
  (anonymous)                             @ client:436
  (anonymous)                             @ client:329
  queueUpdate                             @ client:329
    async function (async)
  queueUpdate                             @ client:325
  (anonymous)                             @ client:223
  handleMessage                           @ client:221
  (anonymous)                             @ client:196


[WARNING]:  <Login> was created with unknown prop 'auth'  --  Login.svelte?import&t=1627203029117:513

  (anonymous)                             @ Login.svelte?import&t=1627203029117:513
  instance                                @ Login.svelte?import&t=1627203029117:512
  init                                    @ index.mjs?v=a6cd7c47:1777
  Login                                   @ Login.svelte?import&t=1627203029117:586
  createComponent                         @ svelte-hooks.js:136
  targetCmp.$replace                      @ svelte-hooks.js:183
  refreshComponent                        @ proxy.js:168
  rerender                                @ proxy-adapter-dom.js:77
  (anonymous)                             @ proxy.js:398
  reload                                  @ proxy.js:396
  (anonymous)                             @ hot-api.js:150
  (anonymous)                             @ client:490
  (anonymous)                             @ client:436
  (anonymous)                             @ client:329
  queueUpdate                             @ client:329
  async function (async)
  queueUpdate                             @ client:325
  (anonymous)                             @ client:223
  handleMessage                           @ client:221
  (anonymous)                             @ client:196


[WARNING]:  <Login> was created with unknown prop 'flash'  --  Login.svelte?import&t=1627203029117:513

  (anonymous)                             @ Login.svelte?import&t=1627203029117:513
  instance                                @ Login.svelte?import&t=1627203029117:512
  init                                    @ index.mjs?v=a6cd7c47:1777
  Login                                   @ Login.svelte?import&t=1627203029117:586
  createComponent                         @ svelte-hooks.js:136
  targetCmp.$replace                      @ svelte-hooks.js:183
  refreshComponent                        @ proxy.js:168
  rerender                                @ proxy-adapter-dom.js:77
  (anonymous)                             @ proxy.js:398
  reload                                  @ proxy.js:396
  (anonymous)                             @ hot-api.js:150
  (anonymous)                             @ client:490
  (anonymous)                             @ client:436
  (anonymous)                             @ client:329
  queueUpdate                             @ client:329
    async function (async)
  queueUpdate                             @ client:325
  (anonymous)                             @ client:223
  handleMessage                           @ client:221
  (anonymous)                             @ client:196


[WARNING]:  <Login> was created with unknown prop 'debug'  --  Login.svelte?import&t=1627203029117:513

  (anonymous)                             @ Login.svelte?import&t=1627203029117:513
  instance                                @ Login.svelte?import&t=1627203029117:512
  init                                    @ index.mjs?v=a6cd7c47:1777
  Login                                   @ Login.svelte?import&t=1627203029117:586
  createComponent                         @ svelte-hooks.js:136
  targetCmp.$replace                      @ svelte-hooks.js:183
  refreshComponent                        @ proxy.js:168
  rerender                                @ proxy-adapter-dom.js:77
  (anonymous)                             @ proxy.js:398
  reload                                  @ proxy.js:396
  (anonymous)                             @ hot-api.js:150
  (anonymous)                             @ client:490
  (anonymous)                             @ client:436
  (anonymous)                             @ client:329
  queueUpdate                             @ client:329
    async function (async)
  queueUpdate                             @ client:325
  (anonymous)                             @ client:223
  handleMessage                           @ client:221
  (anonymous)                             @ client:196


[WARNING]:  <TextInput> was created without expected prop 'error'  --  TextInput.svelte:348

  TextInput                               @ TextInput.svelte:348
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<TextInput>                        @ proxy.js:339
  create_fragment                         @ Login.svelte?import&t=1627203029117:156
  init                                    @ index.mjs?v=a6cd7c47:1792
  Login                                   @ Login.svelte?import&t=1627203029117:586
  createComponent                         @ svelte-hooks.js:136
  targetCmp.$replace                      @ svelte-hooks.js:183
  refreshComponent                        @ proxy.js:168
  rerender                                @ proxy-adapter-dom.js:77
  (anonymous)                             @ proxy.js:398
  reload                                  @ proxy.js:396
  (anonymous)                             @ hot-api.js:150
  (anonymous)                             @ client:490
  (anonymous)                             @ client:436
  (anonymous)                             @ client:329
  queueUpdate                             @ client:329
    async function (async)
  queueUpdate                             @ client:325
  (anonymous)                             @ client:223
  handleMessage                           @ client:221
  (anonymous)                             @ client:196


[WARNING]:  <TextInput> was created without expected prop 'error'  --  TextInput.svelte:348

  TextInput                               @ TextInput.svelte:348
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<TextInput>                        @ proxy.js:339
  create_fragment                         @ Login.svelte?import&t=1627203029117:174
  init                                    @ index.mjs?v=a6cd7c47:1792
  Login                                   @ Login.svelte?import&t=1627203029117:586
  createComponent                         @ svelte-hooks.js:136
  targetCmp.$replace                      @ svelte-hooks.js:183
  refreshComponent                        @ proxy.js:168
  rerender                                @ proxy-adapter-dom.js:77
  (anonymous)                             @ proxy.js:398
  reload                                  @ proxy.js:396
  (anonymous)                             @ hot-api.js:150
  (anonymous)                             @ client:490
  (anonymous)                             @ client:436
  (anonymous)                             @ client:329
  queueUpdate                             @ client:329
  async function (async)
  queueUpdate                             @ client:325
  (anonymous)                             @ client:223
  handleMessage                           @ client:221

Using npm run dev (development mode) related to HMR updates of the login page code

client:439 [vite] hot updated: /resources/js/Pages/Auth/Login.svelte
client:439 [vite] hot updated: /resources/css/app.css

Using npm run dev (development mode) AFTER clicking on the “Login” button

[DEBUG]:  Layout.svelte:671 $page =>  {}


[WARNING]:  <Layout> was created with unknown prop 'errors'  --  Layout.svelte:675

  (anonymous)                             @ Layout.svelte:675
  instance                                @ Layout.svelte:674
  init                                    @ index.mjs?v=a6cd7c47:1777
  Layout                                  @ Layout.svelte:703
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<Layout>                           @ proxy.js:339
  update                                  @ Render.svelte:107
  update                                  @ Render.svelte:326
  update                                  @ index.mjs?v=a6cd7c47:1044
  flush                                   @ index.mjs?v=a6cd7c47:1012
    Promise.then (async)
  schedule_update                         @ index.mjs?v=a6cd7c47:987
  make_dirty                              @ index.mjs?v=a6cd7c47:1745
  (anonymous)                             @ index.mjs?v=a6cd7c47:1783
  (anonymous)                             @ App.svelte:87
  set                                     @ index.mjs?v=a6cd7c47:34
  update                                  @ index.mjs?v=a6cd7c47:42
  swapComponent                           @ App.svelte:96
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                              @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3032
    Promise.then (async)
  n2.visit                                @ chunk-VDHBNV5C.js?v=a6cd7c47:3025
  n2.post                                 @ chunk-VDHBNV5C.js?v=a6cd7c47:3095
  submit                                  @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1096
  post                                    @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1103
  submit                                  @ Login.svelte?import&t=1627203029117:507
  (anonymous)                             @ index.mjs?v=a6cd7c47:413


[WARNING]:  <Layout> was created with unknown prop 'auth'  --  Layout.svelte:675

  (anonymous)                             @ Layout.svelte:675
  instance                                @ Layout.svelte:674
  init                                    @ index.mjs?v=a6cd7c47:1777
  Layout                                  @ Layout.svelte:703
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<Layout>                           @ proxy.js:339
  update                                  @ Render.svelte:107
  update                                  @ Render.svelte:326
  update                                  @ index.mjs?v=a6cd7c47:1044
  flush                                   @ index.mjs?v=a6cd7c47:1012
    Promise.then (async)
  schedule_update                         @ index.mjs?v=a6cd7c47:987
  make_dirty                              @ index.mjs?v=a6cd7c47:1745
  (anonymous)                             @ index.mjs?v=a6cd7c47:1783
  (anonymous)                             @ App.svelte:87
  set                                     @ index.mjs?v=a6cd7c47:34
  update                                  @ index.mjs?v=a6cd7c47:42
  swapComponent                           @ App.svelte:96
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                              @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  (anonymous)                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3032
    Promise.then (async)
  n2.visit                                @ chunk-VDHBNV5C.js?v=a6cd7c47:3025
  n2.post                                 @ chunk-VDHBNV5C.js?v=a6cd7c47:3095
  submit                                  @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1096
  post                                    @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1103
  submit                                  @ Login.svelte?import&t=1627203029117:507
  (anonymous)                             @ index.mjs?v=a6cd7c47:413


[WARNING]:  <Layout> was created with unknown prop 'flash'  -- Layout.svelte:675

  (anonymous)                             @ Layout.svelte:675
  instance                                @ Layout.svelte:674
  init                                    @ index.mjs?v=a6cd7c47:1777
  Layout                                  @ Layout.svelte:703
  createProxiedComponent                  @ svelte-hooks.js:245
  ProxyComponent                          @ proxy.js:239
  Proxy<Layout>                           @ proxy.js:339
  update                                 @ Render.svelte:107
  update                                 @ Render.svelte:326
  update                                 @ index.mjs?v=a6cd7c47:1044
  flush                                  @ index.mjs?v=a6cd7c47:1012
    Promise.then (async)
  schedule_update                        @ index.mjs?v=a6cd7c47:987
  make_dirty                             @ index.mjs?v=a6cd7c47:1745
  (anonymous)                            @ index.mjs?v=a6cd7c47:1783
  (anonymous)                            @ App.svelte:87
  set                                    @ index.mjs?v=a6cd7c47:34
  update                                 @ index.mjs?v=a6cd7c47:42
  swapComponent                          @ App.svelte:96
  (anonymous)                            @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                             @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  (anonymous)                            @ chunk-VDHBNV5C.js?v=a6cd7c47:3032
    Promise.then (async)
  n2.visit                               @ chunk-VDHBNV5C.js?v=a6cd7c47:3025
  n2.post                                @ chunk-VDHBNV5C.js?v=a6cd7c47:3095
  submit                                 @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1096
  post                                   @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1103
  submit                                 @ Login.svelte?import&t=1627203029117:507
  (anonymous)                            @ index.mjs?v=a6cd7c47:413


[HMR][Svelte] Unrecoverable error in <Layout>: next update will trigger a full reload  --  proxy.js:15

  logError                              @ proxy.js:15
  Proxy<Layout>                         @ proxy.js:370
  update                                @ Render.svelte:107
  update                                @ Render.svelte:326
  update                                @ index.mjs?v=a6cd7c47:1044
  flush                                 @ index.mjs?v=a6cd7c47:1012
    Promise.then (async)
  schedule_update                       @ index.mjs?v=a6cd7c47:987
  make_dirty                            @ index.mjs?v=a6cd7c47:1745
  (anonymous)                           @ index.mjs?v=a6cd7c47:1783
  (anonymous)                           @ App.svelte:87
  set                                   @ index.mjs?v=a6cd7c47:34
  update                                @ index.mjs?v=a6cd7c47:42
  swapComponent                         @ App.svelte:96
  (anonymous)                           @ chunk-VDHBNV5C.js?v=a6cd7c47:3066
    Promise.then (async)
  n2.setPage                            @ chunk-VDHBNV5C.js?v=a6cd7c47:3065
  (anonymous)                           @ chunk-VDHBNV5C.js?v=a6cd7c47:3032
    Promise.then (async)
  n2.visit                              @ chunk-VDHBNV5C.js?v=a6cd7c47:3025
  n2.post                               @ chunk-VDHBNV5C.js?v=a6cd7c47:3095
  submit                                @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1096
  post                                  @ @inertiajs_inertia-svelte.js?v=a6cd7c47:1103
  submit                                @ Login.svelte?import&t=1627203029117:507
  (anonymous)                           @ index.mjs?v=a6cd7c47:413


Layout.svelte:386 Uncaught (in promise) TypeError: Cannot read property 'auth' of undefined
    at create_fragment (Layout.svelte:386)
    at init (index.mjs?v=a6cd7c47:1792)
    at new Layout (Layout.svelte:703)
    at createProxiedComponent (svelte-hooks.js:245)
    at new ProxyComponent (proxy.js:239)
    at new Proxy<Layout> (proxy.js:339)
    at Object.update [as p] (Render.svelte:107)
    at Object.update [as p] (Render.svelte:326)
    at update (index.mjs?v=a6cd7c47:1044)
    at flush (index.mjs?v=a6cd7c47:1012)

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 20

Most upvoted comments

For anyone reading this issue in November 2022 or later, prebundleSvelteLibraries is now a top-level option.

svelte({
  prebundleSvelteLibraries: true,
}),
+6
vinkla on Nov 16, 2022

@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 vite.config.js file:

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"
+1
pedroborges on Dec 25, 2021

I helped @burlesona fix this issue on his app. I was able to narrow the cause down to these two things:

  • Add experimental.prebundleSvelteLibraries to the Vite Svelte plugin config

    plugins: [svelte({
  experimental: {
    prebundleSvelteLibraries: true,
  },
})],

  • Force update NPM dependency: rm -rf node_modules && rm yarn.lock && yarn

Doing just one of the above won’t fix it. I’ll add a note for this in the docs.

+1
pedroborges on Dec 6, 2021

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 @inertiajs/inertia-svelte@^0.7.4, @inertiajs/inertia@^0.10.1, and vite@^2.5.4.

Any thoughts or progress on this one?

+1
burlesona on Sep 21, 2021
Read more comments on GitHub
← inertia: Link component missing behavior for URLs from another origin
inertia: Problems with InertiaHead component on Vue 3 →