grunt browserify react requiring jquery

Question

Using latest node and Grunt 0.4.x, react 0.10.x

What to via Grunt execute browserify on React JSX files that have requires on jquery in them:

var $ = require('jquery');

Tried moving the shim transformation into the package.json after reading about a similar problem. Have the following at the bottom of my package.json file:

  "browser": {
    "jquery": "./bower_components/jquery/jquery.min.js",
    "bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
  },
  "browserify-shim": {
    "jquery": {
      "exports": "$"
    },
    "bootstrap": {
      "exports": "bootstrap",
      "depends": [ "jquery:$" ]
    }
  },
  "browserify": {
    "transform": [ "browserify-shim" ]
  }

Can't get it browserify to resolve on a simple JavaScript file (with just "var $ = require('jquery');) from Grunt. Gruntfile.js has:

browserify: {
  options: {
    debug: true
  },

  src: ['src/views/**/*.js'],
  dest: 'build/javascript/client.js'
},

Running Grunt gives the following error:

Error: module "jquery" not found from "D:\\development\\projects\\Prenotes\\src\\views\\dummy.js"

If and when I get this working then I assume "reactify" can be added to the transform array in the package.json.

Answer 1

I put "reactify" in my transform segment in the package.json and redid the Grunt browserify as:

browserify: {
  dist: {
    files: {
      'build/bundle.js' : ['src/views/**/*.jsx']
     }
  }
},

Without the "dist" browserify wouldn't run properly.

This got the shim to work but reactify wouldn't run, so I ended up switching back to grunt-react plus pulled the transform logic back into the Gruntfile.js (which just feels better).

So at the end of the package.json there is:

  "browser": {
    "jquery": "./lib/jquery/jquery.js",
    "bootstrap": "./lib/bootstrap/bootstrap.js"
  },
  "browserify-shim": {
    "jquery": {
      "exports": "$"
    },
    "bootstrap": {
      "exports": "bootstrap",
      "depends": [ "jquery:$" ]
    }
  }

and in the Gruntfile.js:

browserify: {
  options: {
    debug: true,
    transform: ['browserify-shim', require('grunt-react').browserify]
  },
  dist: {
    files: {
      'build/bundle.js' : ['src/views/**/*.jsx']
    }
  }
},

This both shims and processes the JSX. Finally.