9

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.

Mike
  • 6,149
  • 5
  • 34
  • 45
  • you can check how code splitting works (https://reactjs.org/docs/code-splitting.html) I hope it will give some ideas – Mikhail Tokarev Jul 03 '19 at 09: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 Jul 03 '19 at 09:54
  • What does http://localhost:3000/dynamic return exactly? HTML string or JS bundle? – rupindr Jul 03 '19 at 10:59
  • @rupil I've tried JSX string, transpiled JS string and JS webpack bundle. – Mike Jul 03 '19 at 11:05
  • @Michael have you resolved this problem? I'm facing a similar situation – Nicolas Dominguez Jan 09 '20 at 13:47
  • @NicolasDominguez not yet - I parked this work for the time being. – Mike Jan 09 '20 at 13:47
  • @Michael, ok, if you resume your project, take a look at this https://github.com/TroyAlford/react-jsx-parser – Nicolas Dominguez Jan 09 '20 at 14:10
  • also https://stackoverflow.com/questions/51482929/rendering-external-html-react-components-dynamically-in-react – Nicolas Dominguez Jan 09 '20 at 14:21
  • @NicolasDominguez thanks, will take a look. – Mike Jan 09 '20 at 14:23
  • webpacks new module federation might solve your problem. Check out my answer here: https://stackoverflow.com/a/61823689/800619 – NSjonas May 15 '20 at 16:10

1 Answers1

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 >
);
borchvm
  • 3,533
  • 16
  • 44
  • 45
Hakan Torun
  • 1