Type 'import(".../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-runtime").JSX.Element' is not assignable to type 'JSX.Element'.

[winstonpurnomo]

Trying to do this code:

<Mosaic
        renderTile={(id: string, path) => (
          <MosaicWindow path={path} title={`Window ${id}`}>
            <h1>Hello {id}!</h1>
          </MosaicWindow>
        )}
        initialValue={{
          direction: "row",
          first: "a",
          second: "b",
        }}
      />

With react and react-dom version 19.1.0 and

"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",

I get the error:

Type 'import(".../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-runtime").JSX.Element' is not assignable to type 'JSX.Element'

Is this because React 19 is not supported yet? is there a workaround?

[CharlesSpace]

I encountered it too. How did you solve it ？

[winstonpurnomo]

I have not solved this issue. Ended up using a different library.

[CharlesSpace]

import type { MosaicNode} from 'react-mosaic-component'

export type ViewId = 'a' | 'b' | 'c'

export const Mosaic = memo(() => {
  const [originLayout] = useState<MosaicNode<ViewId>>({
    direction: 'row',
    first: 'a',
    second: {
      direction: 'column',
      first: 'b',
      second: 'c'
    },
    splitPercentage: 40
  })

  return (
    <MosaicComponent<ViewId>
      renderTile={(id, path) => {
        return (
          <MosaicWindow<ViewId>
            path={path}
            title={TITLE_MAP[id]}
            toolbarControls={
              <div className="cursor-pointer flex items-center w-30px justify-center">
                <ExpandButton path={path} />
              </div>
            }
          >
            <h1>{TITLE_MAP[id]}</h1>
          </MosaicWindow>
        )
      }}
      initialValue={originLayout}
    />
  )
})

you can try it, like this

Downgrade react 19 to react 18, and there will be no such error