Uncaught TypeError: Cannot read properties of undefined (reading 'currentRoute')

[kermanx]

Discussed in #1924

^{Originally posted by tschaub November 1, 2024}
This would be better suited for a bug report, but I haven't yet figured out the minimum steps to reproduce the issue.

After running the Slidev dev server for a while, I often see these two warnings and the following error:

runtime-core.esm-bundler.js:51 [Vue warn]: injection "Symbol(router)" not found.

runtime-core.esm-bundler.js:51 [Vue warn]: Unhandled error during execution of setup function 
  at <App>

useNav.ts:276 Uncaught TypeError: Cannot read properties of undefined (reading 'currentRoute')
    at ComputedRefImpl.fn (useNav.ts:276:46)
    at refreshComputed (reactivity.esm-bundler.js:377:28)
    at get value (reactivity.esm-bundler.js:1627:5)
    at ComputedRefImpl.fn (useNav.ts:285:49)
    at refreshComputed (reactivity.esm-bundler.js:377:28)
    at get value (reactivity.esm-bundler.js:1627:5)
    at unref (reactivity.esm-bundler.js:1472:29)
    at toValue (index.mjs:211:42)
    at index.mjs:26:42
    at Array.some (<anonymous>)

This sometimes happens after adding or removing slides from slides.md. Other times it happens upon first starting the dev server after installing a package.

I'm using @slidev/cli@0.50.0-beta.5 and vue@3.5.12.

I don't have any special router setup, I'm using the default theme, and am not calling useRouter myself. Has anyone else run into this?
Has anyone else run into this?

[antfu]

I have that often in https://github.com/antfu/talks, but usually only the initial load, and it will go away when I do a browser hard refresh. I also can't reproduce it when moving out.

[kermanx]

If someone happens to encounter this error, please help send the whole stack trace there~

[kermanx]

If someone happens to encounter this error, please help send the whole stack trace there~

I finally got it~

useNav.ts:276 
 Uncaught TypeError: Cannot read properties of undefined (reading 'currentRoute')
    at ComputedRefImpl.fn (useNav.ts:276:46)
    at refreshComputed (reactivity.esm-bundler.js:380:28)
    at get value (reactivity.esm-bundler.js:1631:5)
    at ComputedRefImpl.fn (useNav.ts:285:49)
    at refreshComputed (reactivity.esm-bundler.js:380:28)
    at get value (reactivity.esm-bundler.js:1631:5)
    at unref (reactivity.esm-bundler.js:1476:29)
    at toValue (index.mjs:206:42)
    at index.mjs:26:42
    at Array.some (<anonymous>)
(匿名)	@	useNav.ts:276
refreshComputed	@	reactivity.esm-bundler.js:380
get value	@	reactivity.esm-bundler.js:1631
(匿名)	@	useNav.ts:285
refreshComputed	@	reactivity.esm-bundler.js:380
get value	@	reactivity.esm-bundler.js:1631
unref	@	reactivity.esm-bundler.js:1476
toValue	@	index.mjs:206
(匿名)	@	index.mjs:26
(匿名)	@	index.mjs:26
refreshComputed	@	reactivity.esm-bundler.js:380
get value	@	reactivity.esm-bundler.js:1631
(匿名)	@	useNav.ts:291
refreshComputed	@	reactivity.esm-bundler.js:380
get value	@	reactivity.esm-bundler.js:1631
(匿名)	@	useNav.ts:292
refreshComputed	@	reactivity.esm-bundler.js:380
get value	@	reactivity.esm-bundler.js:1631
getter	@	reactivity.esm-bundler.js:1729
run	@	reactivity.esm-bundler.js:225
watch	@	reactivity.esm-bundler.js:1851
doWatch	@	runtime-core.esm-bundler.js:6221
watch	@	runtime-core.esm-bundler.js:6154
useNavBase	@	useNav.ts:118
(匿名)	@	useNav.ts:367
(匿名)	@	index.mjs:146
run	@	reactivity.esm-bundler.js:77
(匿名)	@	index.mjs:146
setupRoot	@	root.ts:20
setup	@	App.vue:6
callWithErrorHandling	@	runtime-core.esm-bundler.js:199
setupStatefulComponent	@	runtime-core.esm-bundler.js:7907
setupComponent	@	runtime-core.esm-bundler.js:7868
mountComponent	@	runtime-core.esm-bundler.js:5216
processComponent	@	runtime-core.esm-bundler.js:5182
patch	@	runtime-core.esm-bundler.js:4700
render	@	runtime-core.esm-bundler.js:5979
mount	@	runtime-core.esm-bundler.js:3941
app.mount	@	runtime-dom.esm-bundler.js:1767
(匿名)	@	main.ts:9
setTimeout		
(匿名)	@	__uno.css:19
(匿名)	@	__uno.css:19

Update: Analyzed. This makes no sense at all🥲 The only possibility I can think of is about HMR.

[tschaub]

The only possibility I can think of is about HMR

I’ve been assuming HMR as well. Happens very regularly for me for some reason. Let me know if there is useful info I could provide.

[kermanx]

The only possibility I can think of is about HMR

I’ve been assuming HMR as well. Happens very regularly for me for some reason. Let me know if there is useful info I could provide.

Thank you for this information🥰~ I just rechecked the code and found that I was too careless yesterday. PR opened.

[tschaub]

Thanks for digging into this, @kermanx.

I just tried updating to @slidev/cli@0.50.0-beta.9 and unfortunately am getting the same error.

useNav.ts:276 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'currentRoute')
    at ComputedRefImpl.fn (useNav.ts:276:46)
    at refreshComputed (reactivity.esm-bundler.js:380:28)
    at get value (reactivity.esm-bundler.js:1631:5)
    at ComputedRefImpl.fn (useNav.ts:285:49)
    at refreshComputed (reactivity.esm-bundler.js:380:28)
    at get value (reactivity.esm-bundler.js:1631:5)
    at unref (reactivity.esm-bundler.js:1476:29)
    at toValue (index.mjs:206:42)
    at index.mjs:26:42
    at Array.some (<anonymous>)

[tschaub]

Not sure if a screenshot of the debugger is helpful, but in my case, calling useRouter() returns undefined because Symbol('router') is not the same Symbol('router') that is in provides.