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?

You are correct, Meteor doesn't use webpack. You can create an atmosphere package and make the variables you need as global. It's pretty easy to do — Mikkel, Sep 25 '18 at 21:03

score 2 · Accepted Answer · answered Sep 25 '18 at 21:59

2

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')

answered Sep 25 '18 at 21:59

ArmenB

2,125
3
23
47

score 0 · Answer 2 · answered Sep 25 '18 at 21:28

0

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.

answered Sep 25 '18 at 21:28

Paul Cochrane

399
1
4

How to add ReactDom to global namespace in Meteor

2 Answers2