Electron + React: How to dynamically load react components from local files


#1

I have developed a SPA with React that allows users to upload “plugins” they create in order to extend the applications existing functionality. These plugins require their own views for controlling their behavior. These views are supplied as JSX and implement a standardized ReactProps interface.

I am attempting to wrap this SPA in electron and so far it is going very well. What I am having trouble with is dynamically loading React components from electrons main thread.

Plugins are provided as zip files that are unpacked into the electron applications folder. I then attempt to load the react views over the main process using babel presets and something similar to the following,

require(‘electron’).remote.require(plgcomponents/${myComponentName}.jsx)

It almost works but I am encountering an error that appears to be because the Render process and the Main process I believe have different instances of React. womp-womp

Has any one devised a strategy to allow users to supply packages containing JSX react components, writing these packages to applications data folder, and dynamically providing them to the applications Render thread on request?

My next approach is to pass the JSX file as a string to the renderer process and then compile and cache the component in the render thread. I’ve never done in browser JSX rendering so I’ll have to see if this is even possible/compatible.

I could be approaching this all wrong. Please let me know. I am open to any ideas.