How to add ReactDom to global namespace in Meteor

Question

How can I add ReactDOM as a globally accessible variable in Meteor? So it can be used by other 3rd party libraries in Meteor?

Background info, Meteor is a web application framework that simplifies the development process and provides additional features like db data syncing, and etc. Golden Layout is a UI component used to created Dock like layout similar to what you have seen in Visual Studio for example, and it supports populating the views with React components. The Golden-Layout documentation says:

Make sure to include jQuery, React and ReactDOM in a way that makes it accessible to GoldenLayout.

And when trying to import it in Meteor I get the following error:

Uncaught ReferenceError: ReactDOM is not defined

I looked up an example that used webpack and found this configuration segment:

plugins: [
    ...
    // Necessary b/c golden-layout depends on all 3 of these libs via UMD globals
    new webpack.ProvidePlugin({
        React: 'react',
        ReactDOM: 'react-dom',
        $: 'jquery',
        jQuery: 'jquery'
    }),
    ...
],

But Meteor is not using webpack it seems, or I cannot modify the webpack directly. Any suggestions?

Answer 1

This is probability not a good method, but I placed the following code in the client startup code and it worked:

// set the global variables 
global.ReactDOM = require('react-dom')
global.React = require('react')

Answer 2

If you are using typescript use declare to declare a global variable in a typescript file that is loaded at startup

E.g. declare var ReactDom;

I don’t use react but this is how I had to declare my global variables in meteor.