javascript - How to dynamically import components with fallback in React 19 (alternative to @loadablecomponent)? - Stack Overflo

admin管理员组

文章数量:1399963

Issue:

I'm trying to use @loadable/component for dynamic imports in my React project, but I get the following error when running:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: [email protected]
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0 || ^17.0.0 || ^18.0.0" from @loadable/[email protected]

It seems @loadable/component does not yet support React 19.

Example:

In my component, I currently use:

import loadable from '@loadable/component';

const EmojiPickerComponent = loadable(() => import('./EmojiPicker'), {
  fallback: <p id="loading">Loading...</p>
});

This no longer works with React 19.

---

Question:

What is the recommended way to achieve the same dynamic import functionality with fallback in React 19?
Is there any official or community-recommended alternative to @loadable/component for React 19?

---

Example use case:

const EmojiPickerComponent = ??? // What should I use here?

{showEmojiContainer && (
  <EmojiPickerComponent
    onEmojiClick={(event, emojiObject) => {
      setMessage((prev) => `${prev} ${emojiObject.emoji}`);
    }}
  />
)}

---

Environment:

• React: 19.0.0
• Node.js: 22.14.0
• npm: 10.9.2

Any suggestions or guidance would be appreciated!

Issue:

I'm trying to use @loadable/component for dynamic imports in my React project, but I get the following error when running:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: [email protected]
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0 || ^17.0.0 || ^18.0.0" from @loadable/[email protected]

It seems @loadable/component does not yet support React 19.

Example:

In my component, I currently use:

import loadable from '@loadable/component';

const EmojiPickerComponent = loadable(() => import('./EmojiPicker'), {
  fallback: <p id="loading">Loading...</p>
});

This no longer works with React 19.

---

Question:

What is the recommended way to achieve the same dynamic import functionality with fallback in React 19?
Is there any official or community-recommended alternative to @loadable/component for React 19?

---

Example use case:

const EmojiPickerComponent = ??? // What should I use here?

{showEmojiContainer && (
  <EmojiPickerComponent
    onEmojiClick={(event, emojiObject) => {
      setMessage((prev) => `${prev} ${emojiObject.emoji}`);
    }}
  />
)}

---

Environment:

• React: 19.0.0
• Node.js: 22.14.0
• npm: 10.9.2

Any suggestions or guidance would be appreciated!

• javascript
• reactjs
• npm
• react-loadable

Share Improve this question Follow asked Mar 24 at 16:55 Arman KhanArman Khan 4488 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Since @loadable/component does not currently support React 19, you can use React's built-in React.lazy and Suspense for dynamic imports. React.lazy is natively supported and works well with React 19.

Alternative Solution using React.lazy:

import React, { lazy, Suspense } from 'react';

const EmojiPickerComponent = lazy(() => import('./EmojiPicker'));

{showEmojiContainer && (
  <Suspense fallback={<p id="loading">Loading...</p>}>
    <EmojiPickerComponent
      onEmojiClick={(event, emojiObject) => {
        setMessage((prev) => `${prev} ${emojiObject.emoji}`);
      }}
    />
  </Suspense>
)}

Why React.lazy?

1. Native to React – No external dependencies needed.
2. Works with React 19 – Fully compatible.
3. Same functionality – Provides a fallback while the component loads.

If you need SSR support (which React.lazy lacks), alternatives like Next.js dynamic imports (next/dynamic) may be useful.

本文标签：