[4.0] When switching Group & Panel ID, got: can't access property "toFixed", e is undefined

[Jisu-Woniu]

I recently upgraded my project to use react-resizable-panels v4.0, but when I create a new Group with different id for each Panel, the page crashed with an error message:

Uncaught TypeError: can't access property "toFixed", e is undefined

A minimal demo with React and TailwindCSS can be created like this:

// App.tsx
import { useState } from "react";
import "./index.css";
import { Group, Panel, Separator } from "react-resizable-panels";

export function App() {
  const [workspace, setWorkspace] = useState<"A" | "B">("A");
  return (
    <div className="flex size-full flex-col">
      <div className="m-3 flex gap-2">
        Workspace:
        <select
          className="w-20 border bg-gray-50"
          value={workspace}
          onChange={(v) => setWorkspace(v.target.value as "A" | "B")}
        >
          <option value="A">A</option>
          <option value="B">B</option>
        </select>
      </div>

      <div className="h-full grow bg-red-50">
        <Group id={workspace} className="h-full">
          <Panel id={`${workspace}-left`}>Left</Panel>
          <Separator className="h-full w-1 bg-gray-400" />
          <Panel id={`${workspace}-right`}>Right</Panel>
        </Group>
      </div>
    </div>
  );
}

export default App;

/* index.css */
@import "tailwindcss";

@layer base {
  :root {
    @apply font-sans;
  }

  html,
  body,
  #root {
    @apply m-0 size-full bg-white text-black;
  }
}

Initially it works fine in workspace A, but if you change to workspace B use the select box, it crashes.

[Jisu-Woniu]

Stackblitz demo: https://stackblitz.com/edit/vitejs-vite-yumrdyht?file=src%2FApp.tsx

[Jisu-Woniu]

The code seems to be from here:

react-resizable-panels/lib/global/utils/formatLayoutNumber.ts

Lines 1 to 3 in 4f0b7d9

	export function formatLayoutNumber(number: number) {
	return parseFloat(number.toFixed(3));
	}

So the argument passed in is not a number, but a number | undefined.

[Jisu-Woniu]

I think I found the cause.

react-resizable-panels/lib/global/utils/layoutsEqual.ts

Lines 9 to 15 in 4f0b7d9

	for (const id in a) {
	if (compareLayoutNumbers(a[id], b[id]) !== 0) {
	return false;
	}
	}
	return true;

This for-loop iterates all ids in a, but b[id] may not exist.

[bvaughn]

Thanks for the repro and helpful debugging info! I'll take a look.

[bvaughn]

Goofy little oversight on my part. Should be fixed by #548

[bvaughn]

Ths bugfix has been released in react-resizable-panels@4.0.9

Thanks for the report!

---

❤️ → ☕ givebrian.coffee