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
– Mikkel, Commented Sep 25, 2018 at 21:03

Armen Babakanian · Accepted Answer · 2018-09-25 21:59:05Z

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, 2018 at 21:59

Armen Babakanian

2,4053 gold badges31 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul Cochrane · Accepted Answer · 2018-09-25 21:28:04Z

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, 2018 at 21:28

Paul Cochrane

3991 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to add ReactDom to global namespace in Meteor

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related