Browserify example is not self explanatory

[meghadev]

I am referring to the example provided in https://atmospherejs.com/cosmos/browserify

I am using the following steps to use the npm module on client side:

• Created app.browserify.js in client/browserify: var myTypecast = require('typecast'); console.log(myTypecast);
• packages.json: { "typecast": "0.0.1" } When I start the meteor server and load my web page, I can see the console log: typecast(val, type) { var fn = typecast[type]; if (typeof fn != 'function') throw new Error('cannot cast to ' + type); return fn(val); }

Now, if I try to use myTypecast in /client/someclientfile.js, I get the error "myTypecast is not defined"

Issue:

• From the given documentation, I am unable to understand whether I need transformation or not. In your example at : https://github.com/elidoran/cosmos-browserify-example/tree/master/client/lib .json is not there at all. So I don't know when to use it and when to not.
• To try if I really need it, I dont know what is the connection between the terms that you are using in both the files in your example in https://atmospherejs.com/cosmos/browserify. Your example says:

Packages.json { "react-router": "0.13.3", "exposify": "0.4.3" }

app.browserify.js ReactRouter = require("react-router"); // Here you are using the same term being used in packages.json

app.browserify.options.json { "transforms": { "exposify": { "global": true, "expose": { "react": "React" // What does "react" and "React" refer to? How do I specify them? } } } }

and finally, how to use the integrated module. The documentation is just not explanatory enough (atleast not for a novice like me)

[elidoran]

Here's a lot of extra info to help along the way:

Meteor's NPM support requires using Npm.depends() in a package's package.js to declare the modules you want and Npm.require() to get them, and it's for server side only.

Specifying modules in an app isn't supported by Meteor core. So, use something else, like the package meteorhacks:npm. That package is what enables using a packages.json file in the root of your app. It creates a local package named npm-container which uses the contents of packages.json to make Npm.depends() calls to make Meteor install the modules. Read its documentation to understand how it works.

cosmos:browserify is a wrapper around the browserify tool which allows using require() to get the modules you want and it will process all the requires and combine the results into a single file. See their documentation for an explanation of what browserify is and what it can do.

The options file allows you to specify browserify transforms (among other things). It isn't necessary to make an options file at all. Only make one when you need to specify options to browserify.

In the examples for react the published module name is react-router so that is used both in the packages.json file and in the require() call. The example use of the exposify transform is taking the value react in that module and "exposing" it as React instead.

The README has a section of instructions specific to browserifying a file in an app. Its Step 1 says add meteorhacks:npm package. It also explains that package creates the packages.json file in the root of the app. (It doesn't go next to the file to browserify.)

The README's Step 2 says create your variable without the var.

The README's Step 4 says to use the browser's console to verify the file was browserified properly and supplied your variables to the client.

Meteor handles file load order a specific way. Read their documentation on app structure for an explanation.

It looks like you may be having a file load order problem. Try these things:

1. Change client/browserify path to client/lib and your file will be loaded earlier than the other client file.
2. Remove the var to ensure it's in the right scope.
3. Don't use an options file because what you're doing doesn't require it
4. Specify the modules you want in the packages.json file in the root of your app for meteorhacks:npm to find it.