createMemo sometimes returns undefined when called during a transition

[Brendonovich]

Describe the bug

In some cases, createMemo is returning undefined during navigation transitions. We've observed this mainly from using Kobalte components in our main route that gets navigated to after signing in, which happens in a transition. I don't have a small reproduction yet but will try put one together eventually.

Your Example Website or App

todo

Steps to Reproduce the Bug or Issue

todo

Expected behavior

The result of the memo should be calculated and returned instead of undefined

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: N/A
• Version: N/A

Additional context

No response

[silen-z]

I've also encountered this. I'm using solid router and tanstack query in ssr: false app. Unfortunately I don't know how to create minimal reproduction.

[Brendonovich]

In our case with tanstack router, it looks like the computation in createMemo is being executed while Transition.running === true, even though it's not part of the transition's sources, leading to neither .value nor .tValue being assigned to in writeSignal.

solid/packages/solid/src/reactive/signal.ts

Lines 1308 to 1315 in 4d824b0

	if (Transition) {
	const TransitionRunning = Transition.running;
	if (TransitionRunning || (!isComp && Transition.sources.has(node))) {
	Transition.sources.add(node);
	node.tValue = value;
	}
	if (!TransitionRunning) node.value = value;
	} else node.value = value;

[Brendonovich]

This is almost certainly related to solidjs/solid-router#451
nvm looks like this is different, more likely a bug in solid router as if (Transition) is never true in the reproduction

[silen-z]

I think I hit this again. So I made as minimal reproduction as I could. Check this CodeSandbox: https://codesandbox.io/p/devbox/lively-forest-5rsvd6

[14gasher]

I consistently run into this issue. Stack is typically:

• solid-start w/ solid router
• data fetching with tanstack/solid-query

I typically do 2 things to help:

1. Try to remember to set a default memo value createMemo(/*your memo fn here*/, defaultValue). That eliminates the issue
2. Wrap the application in an ErrorBoundary that auto calls reset after 10ms in prod - that way if I forget any default vals, the reset typically will handle it. Example below using a leaky bucket to determine if need a full page reload (sometimes works better) or just a simple reset (could be improved by also leaky bucketing full page reloads and doing something else):

// outside the component

// Track error resets with a leaky bucket
const resetTimestamps: number[] = [];

function shouldReloadInsteadOfReset(): boolean {
 const now = Date.now();
 // Remove timestamps older than 500ms
 while (resetTimestamps.length && now - resetTimestamps[0] > 500) {
 resetTimestamps.shift();
 }
 // Add the current timestamp
 resetTimestamps.push(now);
 // If 5 or more resets happened in the last 500ms, trigger reload
 return resetTimestamps.length >= 5;
}

// inside the component
<ErrorBoundary
 fallback={(e, reset) => {
 if (import.meta.env.DEV) {
 return (
 <div class="p-6 rounded-md bg-red-50 text-red-900 shadow-md border border-red-200 max-w-2xl mx-auto">
 <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
 🚨 Unexpected Error
 </h2>

 <div class="space-y-2 mb-6">
 <p>
 <strong>Name:</strong> {e.name || "UnknownError"}
 </p>
 <p>
 <strong>Message:</strong>{" "}
 {e.message || "No message provided."}
 </p>
 {e.cause && (
 <p>
 <strong>Cause:</strong>{" "}
 {typeof e.cause === "string"
 ? e.cause
 : JSON.stringify(e.cause)}
 </p>
 )}
 </div>

 <button class="btn btn-primary mb-6" onClick={() => reset()}>
 🔄 Reset and try again
 </button>

 <div class="bg-white rounded p-4 shadow-inner overflow-x-auto max-h-96 border text-sm font-mono">
 <p class="mb-2 text-gray-500 font-semibold">Stack trace:</p>
 {e.stack
 ?.split("\n")
 .map((line: string) => (
 <div
 class={`whitespace-pre-wrap ${
 line.includes("/src")
 ? "font-bold text-blue-600"
 : "text-gray-700"
 }`}
 >
 {line}
 </div>
 )) || <div>No stack trace available.</div>}
 </div>
 </div>
 );
 } else {
 createEffect(() => {
 setTimeout(() => {
 if (shouldReloadInsteadOfReset()) {
 window.location.reload();
 } else {
 reset();
 }
 }, 10);
 });
 }
 return null;
 }}
 >
 {children}
</ErrorBoundary>

[jpdutoit]

I think this has the same root cause as #2046. Attempted a fix at #2617

[ryansolid]

@Brendonovich can you confirm if the released fix works?

[Brendonovich]

We've been using it via a patch for a while and it's worked, will update and remove the patch and see how we go

[ryansolid]

Ok I will take this as fixed then. Make a new issue/reopen if it comes back again/different form.