Skip to content

TypeScript Type Compatibility Issues with React 19.0.0 #1021

Open
@TheCollinsByte

Description

@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/> }
);
  1. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions