Usage with external React scripts

[SukantGujar]

Hi,

One of our packages exports a React Component in two modes... as an ordinary React Component for usage in a React application, and as an injectable script in non-React applications where its code internally invokes ReactDOM.render to create a wrapper element to host it. Naturally, the injectable version invokes injectTapEventPlugin method before the render call as the host application cannot/won't do it.

For generating the injectable script version, we have referenced React and ReactDOM as externals in Webpack config of this package. However, this is apparently breaking the react-tap-event-plugin as while bundling, webpack still bundles the ReactDOM bits required by the plugin's code. And then in the host app, the external ReactDOM loads and for some reason the plugin doesn't get registered with it.

So I wanted to know what are our options here? One alternative is to not externalize React/ReactDOM and bundle them with the injectable script version of the component. This will work as the plugin and ReactDOM will be loaded together. However this will cause issues when/if the host application already has an existing React/ReactDOM version loaded as React doesn't like two versions of itself very much.

Is it possible to change the plugin code to allow binding with external ReactDOM, already loaded in browser?

Please let me know if you need to look at some code to understand this better, I will try to publish an example.

[trmjoa]

I am facing the exact same issue. Has anyone solved this?

Stuff likereact-dom/lib/EventPluginHub is not exposed by the the standard default export of the react-dom package. So I can write a function that declares everything that matches /react-dom/(.*)/ as external, but I don't see a way of providing the EventPluginHub to react-tap-event-plugin if I do so.

Does anyone have any suggestions on how to solve this?

[susan-github]

Do you find solution?

[SukantGujar]

We were facing this issue due to dependency on material-ui 0.xx versions which used tap-event-plugin. We migrated to next which doesn't have this dependency. This issue itself was never fixed.