Q:

How can I include a compiled react js component from a compiled react js single page app?

Usually, when I want to use a react js dependency, I install the dependency using npm, then include its source JPX in my source JPX, and then I compile the whole thing, my page + its dependencies into a single web pack.
I would like to include a dependency at run time. For example, I create my react js page, compile it, but it's code loads a compiled dependency and injects the component dynamically into a div of my page. 
Is this possible? Is there an easy way of doing it?

A:

The application and plugin component that belong to different bundles can interact through global variables.
Once a plugin is bundled as UMD module, which is default choice for client-side library, its export is available as global variable specified in bundler configuration (output.library for Webpack), e.g. SomePluginNamespace.
Considering that plugin component is exported from plugin bundle:
export const SomePluginComponent = prop => ...;

And it's loaded before main bundle:
<script src="/plugin.bundle.js"></script>
<script src="/app.bundle.js"></script>

It will be available as window.SomePluginNamespace.SomePluginComponent inside the application. <script> tags can be created programmatically by the application to load plugin bundles dynamically.
Another way to use globals is to provide plugin developer with a framework that takes care of plugin components, e.g. my-app-plugin-registry package:
const CONTAINER_SYMBOL = Symbol.for('my-app-plugins-container');

const container = window[CONTAINER_SYMBOL] = window[CONTAINER_SYMBOL] || {};

export const registerComponent = (name, Component) => container[name] = Component;

export const getComponent = (name) => container[name];

Plugin developer registers a component in own bundle:
import { registerComponent } from 'my-app-plugin-registry';

export const SomePluginComponent = registerComponent('SomePluginComponent', prop => ...);

Application developer accesses registered components with getComponent in another bundle. This requires to load plugin scripts prior to application script. Or in case plugin <script> is created dynamically, use getComponent only after plugin script was loaded.
Yet another way is to use script loader that is aware of JavaScript modules, notably SystemJS. Application bundle loads plugin bundles dynamically:
System.import('.../plugin.bundle.js').then(({ SomePluginComponent }) => { ... });

SystemJS should be configured to process UMD modules in plugin bundles correctly.

