Open
Description
🐛 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:
- Create a new React 19.0.0 project with TypeScript
- Install @loadable/component and its types
- 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/> }
);
- 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
Labels
No labels