How to implement dynamic SPA plugins with ReactJS?

Question

React

Hello dear experts!
I have a question about dynamically inlining js modules.
The idea is the following. There is a basic application code written in ReactJS. I need a mechanism for embedding plugins (on the same ReactJS) on the page. Those. on the page compiled by webpack, depending on a certain config, according to the presence in the WWW-ROOT/plugins or QUERY_STRING folder, you additionally need to load js-files (from WWW-ROOT/plugins), embed the plugin components (about which the base code knows nothing) and respond to state changes with a single entry point MainApp.render()
It would be ideal to have access to the global state of the base code from the plugin code.
I saw options with a router, but they require recompilation of the bundle, which is inappropriate for a production server.
Now my web application is written in old (pure) js, plugins are embedded according to the list (specified in the config) by dynamically adding the script element (and, if necessary, style). Each js plugin "knows" where it needs to be embedded and how to modify the page. I would like to have the same mechanism in SPA on ReactJS...

Answer 1

The issue is resolved in two steps.
First, you need to study the dynamic loading of components, chunks, etc. webpack configuration issues. You can do the same thing that a router does, but without a router. ;)
Secondly, we need to agree on some interface that all plugins will implement, for example, we can say that all components loaded in this way must support the store props, to which the application will pass the store, so that they themselves subscribe to changes, etc. P.