browserify and babel namespace error React

Question

New to browserify: I have a normal js file with some react components grouped in a namespace like:

var myNameSpace= {
'reactFunc1': React....,
'reactFunc2': React....,
'reactFunc3': React....,
'nonreactFunc1' function(..)
}

And in some other js file I'm trying to use:

myNameSpace.reactFunc1(...);

this works fine when I tranform jsx to js using babel.

But when I browerify the files using the command browserify -t [ babelify --presets [ react ] ] some.js someOther.js

myNameSpace not defined

What I'm doing wrong here. Is there any way to get this working without much hastle / code change?

Are you using the namespace on a different module? How are you importing the namespace? — Tzach
– Tzach, Commented Apr 13, 2016 at 6:43
@Tzach I'm not importing it. And there is no module here.. I have 2 seperate js files... when I don't browserify the files... myNameSpace.reactFunc1 is defined but when I browserify myNameSpace.reactFunc2 is undefined — Nishanth Matha
– Nishanth Matha, Commented Apr 13, 2016 at 6:48
I'm not sure how to make this var myNameSpace= { 'reactFunc1': React...., 'reactFunc2': React...., 'reactFunc3': React...., 'nonreactFunc1' function(..) } as module and export it with name myNameSpace and use this in other js file and do something like myNameSpace.reactFunc1(...); — Nishanth Matha
– Nishanth Matha, Commented Apr 13, 2016 at 6:49
Got you. That's because when using browserify each file is a module, and the var definitions are local to that module. You'll need to import one module into the other, or do window.myNameSpace = ... — Tzach
– Tzach, Commented Apr 13, 2016 at 6:50

Tzach · Accepted Answer · 2016-04-13 06:54:03Z

2

You have two options here, using modules or using the global namespace.

When using modules, you will need to export the namespace from the first module and require it in the other module:

module.exports = {
    'reactFunc1': React....,
}

Then in the other file

var myNameSpace = require('first_module');

The other option (less preferred) is to use the global window object:

window.myNameSpace = {
    'reactFunc1': React....,
}

Then in the other file:

window.myNameSpace.reactFunc1()

answered Apr 13, 2016 at 6:54

Tzach

13.4k15 gold badges77 silver badges117 bronze badges

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

1 Comment

@NishanthMatha Give your modules meaningful names, that way it's easier to keep in mind what does what.