Cannot read properties of undefined (reading 'disable_scroll_handling')

[secretgspot]

Describe the bug

Just appeared out of nowhere and bricked the whole app, won't go away no matter what. Tried deleting node_modules + .svelte-kit then reinstall and still there.

navigation.js?v=92264f1c:16 
Uncaught TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling') at navigation.js?v=92264f1c:16:11


Fails on:
export const disableScrollHandling = ssr
	? guard('disableScrollHandling')
	: client.disable_scroll_handling;  <---

with message: Uncaught TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling')

Reproduction

https://github.com/secretgspot/sveltekit-auth-helper-bug

installed sveltekit latest,
installed supabase-js v2,
installed auth-helpers-sveltekit

Logs

No response

System Info

{
	"name": "myapp",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview"
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/kit": "next",
		"svelte": "^3.46.0",
		"vite": "^3.1.0"
	},
	"type": "module",
	"dependencies": {
		"@fontsource/fira-mono": "^4.5.0",
		"@supabase/auth-helpers-sveltekit": "^0.8.2",
		"@supabase/supabase-js": "^2.0.0-rc.10"
	}
}

Severity

blocking all usage of SvelteKit

Additional Information

No response

[gtm-nayan]

You need to provide a proper reproduction as instructed by the issue template.

A link to a repository, or a fork of https://node.new/sveltekit, that reproduces the issue. Reproductions must be short, self-contained and correct and must not contain files or code that aren't relevant to the issue — please do NOT just paste a link to your project. Explaining how to reproduce is generally not enough. It pushes the burden of creating a reproduction project onto a small set of volunteer maintainers and isn't scalable. If no reproduction is provided, the issue will be closed.

[secretgspot]

I followed instructions from auth-helper

After trying every combination I found that if I delete hooks.client.js which only contains

import '$lib/db';

it first yells at me with

Failed to resolve import "../../src/hooks.client.js" from ".svelte-kit\generated\client-manifest.js". Does the file exist?
Failed to resolve import "../../src/hooks.client.js" from ".svelte-kit\generated\client-manifest.js". Does the file exist? (x2)
3:00:00 AM [vite] Internal server error: Failed to resolve import "../../src/hooks.client.js" from ".svelte-kit\generated\client-manifest.js". Does the file exist?
  Plugin: vite:import-analysis
  File: V:/xxx/.svelte-kit/generated/client-manifest.js
  1  |  import * as client_hooks from '../../src/hooks.client.js';
     |                                 ^
  2  |  
  3  |  export { matchers } from './client-matchers.js';

then when I restart the server, error goes away.
I returned the hooks.client.js and sure enough error returned after restarting the server

[dummdidumm]

I can't reproduce this given the instructions. Please provide a repository with the minimum reproducible.

[secretgspot]

I can't reproduce this given the instructions. Please provide a repository with the minimum reproducible.

https://github.com/secretgspot/sveltekit-auth-helper-bug

here is the branch with bug presented

npm i
npm run dev

watch everything burn!

Remove hooks.client.js and bug goes away.

[dummdidumm]

Remove import { goto } from '$app/navigation'; from lib/db/index.js and it works.

The problem is that hooks.client.js is called before the client with its methods is initialized, so if you import $app/navigation in there, which uses the not-initialized client, it breaks. I'm not sure how we best deal with this. We could

• try to do some import analysis on hooks.client.js similar to the env/server analysis and throw a more meaningful error if we encounter an invalid import
• initialize the client right away with some placeholder so accessing its values doesn't throw
• wrap using the client's values with functions so access is lazy

I feel like the first option is the one that makes the most sense, the others just hide misuse and wouldn't prevent that nebolous error if someone would access the client's methods.

[yasserlens]

I also had this issue, and it refused to go, until I removed $app/navigation from a component in $lib. Then once it was resolved, I got $app/navigation back into the same component and I never saw this issue again. Not sure how it was is now magically gone but that makes me nervous about production.

I'll aim to move the goto function out of components by propagating events up to be handled by pages under routes instead just to be on the safe side.

[justingolden21]

Encountered this too but on refresh it works. Hoping it doesn't appear in prod, as something similar happened in prod (!!!) somewhat recently and idk what caused it.

[tony19]

This can be reproduced without hooks.client.js (see repro). If you use SvelteKit with Storybook or Histoire, the bug appears if any of your storied components import $app/navigation.

[aidvai-sp]

I also get this error but when trying to beforeNavigate from $app/navigation. Commenting out this import and the code snippet that uses it fixes the problem

[MelodicCrypter]

I'm also experiencing the "disable_scroll_handling" issue

Using: "@sveltejs/kit": "^1.15.5"

[Bandit]

I'm also suddenly getting this after a package (@skeletonlabs/[email protected]) bumped my Svelte version to 3.5.8 (from 3.55.1)

After fiddling around with this, it seems like Vite is doing something funky with "optimizing dependencies" and/or caching. If I close my localhost tab and launch it again in a fresh tab, it eventually works (after a lot of HMR errors and forced reloads)

 VITE v4.1.4  ready in 522 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
2:52:10 PM [vite] ✨ new dependencies optimized: @floating-ui/dom, nano-equal, firebase/auth, firebase/firestore, @steeze-ui/iconic-free, ...and 5 more
2:52:10 PM [vite] ✨ optimized dependencies changed. reloading
2:52:50 PM [vite] ✨ new dependencies optimized: @skeletonlabs/skeleton, @steeze-ui/svelte-icon
2:52:50 PM [vite] ✨ optimized dependencies changed. reloading
2:52:54 PM [vite] ✨ new dependencies optimized: @steeze-ui/heroicons, dset/merge, dlv
2:52:56 PM [vite] ✨ new dependencies optimized: svelecte/src/Svelecte.svelte, initials

[davecalleja-casumo]

I can reproduce this when adding this to my vite config

build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          // Magic happens here
          if (id.includes('sentry')) {
            return 'vendor_sentry'
          }
          // Set this as undefined if you want to split your entire bundle.
          return 'vendor'
        }
      }
    }
  }

Follows previous comment that vite is doing something while building / optimising.