TypeScript Type Compatibility Issues with React 19.0.0

[TheCollinsByte]

🐛 Bug Report

When using @loadable/component with React 19.0.0, there are TypeScript compilation errors due to type incompatibilities between LoadableComponent and React's JSX element types.

To Reproduce

Steps to reproduce the behavior:

1. Create a new React 19.0.0 project with TypeScript
2. Install @loadable/component and its types
3. Create a lazy-loaded component:

import loadable from '@loadable/component';
import {RouterLazyFallback} from "../components/RouterLazyFallback.tsx";

export const LazyEntryHomePage = loadable(
    () => import('../components/Home.tsx'),
    { fallback: <RouterLazyFallback/> }
);

export const LazyEntryContactPage= loadable(
    () => import('../components/Contact.tsx'),
    { fallback: <RouterLazyFallback/> }
);

4. Try to use it in a React Router route configuration:

function App() {

  return (
      <BrowserRouter>
          <Routes>
              <Route path="/" element={<LazyEntryHomePage/>} />
              <Route path="/contact" element={<LazyEntryContactPage/>} />
          </Routes>
      </BrowserRouter>
  )
}

Environment

• React version: 19.0.0
• @loadable/component version: latest
• TypeScript version: latest
• Node version: 20.10.0
• Package manager: yarn

Additional Context

This issue specifically affects projects that:

• Use React Router
• Use TypeScript
• Have upgraded to React 19.0.0
• Rely on @loadable/component and @types/loadable__component for code splitting

Expected behavior

The following TypeScript error occurs when using LoadableComponent in React Router routes:

TS2786: 'LazyComponent' cannot be used as a JSX component.
  Its type 'LoadableComponent<unknown>' is not a valid JSX element type.

Impact

This issue blocks teams from upgrading to React 19 while using @loadable/component, forcing them to either:

• Stay on older React versions
• Switch to React.lazy()
• Use type assertions (which reduces type safety)

Link to repl or repo (highly encouraged)

Please provide a minimal repository on GitHub.

https://github.com/TheCollinsByte/loadable-types-bug-repro

Issues without a reproduction link are likely to stall.

Paste the results here:

## System:
 - OS: Linux 6.6 Arch Linux
 - CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1255U
 - Memory: 16.30 GB / 23.19 GB
 - Container: Yes
 - Shell: 5.2.37 - /usr/bin/bash
## Binaries:
 - Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
 - Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn
 - npm: 10.2.4 - ~/.nvm/versions/node/v20.10.0/bin/npm

[SebastiaanNijland]

We also run into this issue - I'm wondering if the package will be updated to support react 19, or if it is going to be deprecated in favor of a different solution? Did anyone find an alternative?

[TheCollinsByte]

Did anyone find an alternative?

No, it seems the library isn't supported anymore

[Resmedia]

This is not good solution, but working for me i add as React.ComponentType<any>

  () => import('../../components/cart/CartItem')
) as React.ComponentType<any>;```