sveltejs/kit

Cannot read properties of undefined (reading 'disable_scroll_handling')

Closed this issue · 6 comments

Describe the bug

When I use afterNavigate, beforeNavigate or goto in a +page while using the adapter static and the chunking strategy of vite (splitVendorChunkPlugin) I get an error Uncaught TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling') at runtime.

Note:

Possible related issue #4432 and #1485

Capture d’écran 2022-10-28 à 07 23 32

Reproduction

git clone https://github.com/peterpeterparker/my-app-yolo
cd my-app-yolo
npm ci
npm run build
npx serve build

Logs

vendor-67141009.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling')
    at vendor-67141009.js:1:35550
(anonymous) @ vendor-67141009.js:1
2vendor-67141009.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling')
    at vendor-67141009.js:1:35550

System Info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M2
    Memory: 762.14 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    npm: 8.19.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 106.0.2
    Safari: 16.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.84 
    @sveltejs/adapter-static: ^1.0.0-next.46 => 1.0.0-next.46 
    @sveltejs/kit: next => 1.0.0-next.525 
    svelte: ^3.44.0 => 3.52.0 
    vite: ^3.1.0 => 3.1.8

Severity

serious, but I can work around it

Additional Information

Workarounds:

  • load goto with const {goto} = await import('$app/navigation')

  • no direct workaround to use afterNavigate. instead I used a custom store in which I track which pages where visited

I don't know if it's possible to use this chunking strategy with SvelteKit. All the $app/X imports are tightly connected to the running app - for example the route manifest. I don't know how the chunking strategy works exactly, but if it just moves everything within @sveltejs/kit into one vendor chunk, that won't work.

I also encountered this problem when using rollupOptions.output.manualChunks

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling')
    at vendor.c321e0ef.js:3:9569

Experiencing this too; it crashes the entire webpage. Refreshing fixes it. I don't want to ship code to my users that crashes the first time they load the page though.

image
image

TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling')
    at navigation.js?v=9f0f29a7:14:11
handleError @ app.js:28
handle_error @ client.js?v=7a176f0d:1339
_hydrate @ client.js?v=7a176f0d:1789
await in _hydrate (async)
start @ start.js:22
(anonymous) @ stopwatch:3076
Promise.then (async)
(anonymous) @ stopwatch:3075
navigation.js?v=9f0f29a7:14 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling')
    at navigation.js?v=9f0f29a7:14:11
(anonymous) @ navigation.js?v=9f0f29a7:14
navigation.js?v=9f0f29a7:14 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling')
    at navigation.js?v=9f0f29a7:14:11

I'm also experiencing the "disable_scroll_handling" issue

Screenshot 2023-04-14 at 1 58 30 PM

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

godmar commented

I'm experiencing the same issue, and const {goto} = await import('$app/navigation') does not work as a work-around.

Why is this issue scheduled for whenever?

How do people make production builds with this not working?

fixed by #9808