PanelResizeHandle cannot be used as a JSX component (wrong types)

[tomaszferens]

I'm getting an error for PanelResizeHandle when rendering an example from docs.

TS Error:

'PanelResizeHandle' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'string' is not assignable to type 'Element'.(2786)

Code:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';

export const App = () => {
  return (
    <div>
      <PanelGroup direction="horizontal">
        <Panel defaultSize={30} minSize={20}>
          left
        </Panel>
        <PanelResizeHandle />
        <Panel minSize={30}>middle</Panel>
        <PanelResizeHandle />
        <Panel defaultSize={30} minSize={20}>
          right
        </Panel>
      </PanelGroup>
    </div>
  );
};

const root = createRoot(document.getElementById('app'));

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Stackblitz: https://stackblitz.com/edit/stackblitz-starters-zbzfr8?file=src%2Findex.tsx

Every package is up to date (latest):

[bvaughn]

I think React TypeScript types have changed recently to better work with server components (https://github.com/vercel/next.js/issues/42292) so the fix here is probably for me to update the return types this library declares. In the meanwhile, you can cast or ts-ignore this error.

[tomaszferens]

I think React TypeScript types have changed recently to better work with server components (https://github.com/vercel/next.js/issues/42292) so the fix here is probably for me to update the return types this library declares. In the meanwhile, you can cast or ts-ignore this error.

Yeah I went with @ts-expect-error for now 🙏

[QianKuang8]

I think React TypeScript types have changed recently to better work with server components (https://github.com/vercel/next.js/issues/42292) so the fix here is probably for me to update the return types this library declares. In the meanwhile, you can cast or ts-ignore this error.

Thanks for the answer, it helps me to solve the error

[bvaughn]

This fix just went out with 1.0.8

---

❤️ → ☕ givebrian.coffee