Dynamically load a React component/bundle from external source

Question

What I want to achieve is allow people to author and build their own React content (assume that this content is trusted as it will be served up from my own APIs) and to then load that content dynamically into my React UI.

I've been hunting around trying to find a way to get this working, but I'm missing the final piece to make it work, or it may not be possible.

So imagine I have my already bundled UI deployed and running with a basic app like: (I've omitted module imports for brevity)

const App = () => (
  <h1>My App</h1>
  <DynamicContent />
);

...so for the dynamic content component I want to be able to load the external source - I've seen react-loadable mentioned a lot, so hoping this helps:

const DynamicComponent = () => (
  state = { content: null };

  componentDidMount() {
    const content = Loadable({
      loader: () => import(fetch('http://localhost:3000/dynamic')),
      loading: () => <div>Loading { m }...</div>,
    });
    this.setState({ content });
  }

  render() {
    return this.state.content;
  }
);

If we then assume that hitting http://localhost:3000/dynamic returns the string of a component like this:

const MyContent = () => <h2>Dynamic Content</h2>;

export default MyContent;

What I am finding is that no matter what format I returned the fetched JS in (raw JSX as above, fully-transpiled JS or webpack bundle) the content does not render.

The only way I can make dynamic content render is if it's existing content in the UI code base that's code split via a relative file import e.g. import('./DynamicContent').

Is this even possible? It feels like it should be, but I'm clearly missing something in my understanding. Perhaps there's a solution involving SSR, but I can'd find a helpful example that puts the pieces in place that I need.

Thanks.

you can check how code splitting works (reactjs.org/docs/code-splitting.html) I hope it will give some ideas — Mikhail Tokarev
– Mikhail Tokarev, Commented Jul 3, 2019 at 9:47
Hi @MikhailTokarev I updated the question above to say that the only way that this works for me is if I use code-splitting and the "dynamic" content is actually already part of the UI code base during webpack bundling. However if this content is not available until run-time then I cannot find a way to load this on-demand. — Mike
– Mike, Commented Jul 3, 2019 at 9:54
What does localhost:3000/dynamic return exactly? HTML string or JS bundle? — rupindr
– rupindr, Commented Jul 3, 2019 at 10:59
@rupil I've tried JSX string, transpiled JS string and JS webpack bundle. — Mike
– Mike, Commented Jul 3, 2019 at 11:05
@Michael have you resolved this problem? I'm facing a similar situation — Nicolas Dominguez
– Nicolas Dominguez, Commented Jan 9, 2020 at 13:47

Borja · Accepted Answer · 2020-12-16 08:07:39Z

0

you have to use "React.Suspense". change App.js as below

const App = () => (
  <h1>My App</h1>
  <React.Suspense fallback="Loading...">
     <DynamicContent />
  </React.Suspense >
);

edited Dec 16, 2020 at 8:07

Borja

3,62125 gold badges51 silver badges51 bronze badges

answered Dec 16, 2020 at 8:02

Hakan Torun

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically load a React component/bundle from external source

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related