Combining Visual Studio 2015, gulp, browserify, React.js, and JSX

Question

As a fairly Microsoft-centric and predominantly back-end programmer, tackling all of these (cool) new technologies all at once has proved pretty daunting. I'm fairly pleased to say that I've got a lot of things wired together and that I feel as if i'm very close to breaking through one last hurdle to a point where i can finally begin to work and produce code efficiently in this brave new world, but there's a major obstacle I'm hung up right now. This is all new to me so i'll try to explain as i can:

I'm using VS 2015 and building up a DNX ASP.NET 4.5 MVC 6 web application. I've used NPM to install react, flux, and all manner of supporting modules. I'm working on my first fully-functional JSX screen which is using the flux pattern to load data and I'm receiving callbacks from my store when the data is loaded from an API service.

I love being able to use the require('xxx') syntax to chain the dependencies together, so I've formed that habit and i'm using browserify & reactify from my gulp task to manage the dependencies, gather all of the input files, and convert my JSX files to JS at, er, gulp-time i guess.

The issue i'm running into now is one that I never expected: when I use require() in a JS file to include a JSX source file that defines one of my react components and then attempt to mount an instance of that component using ReactDOM.render and JSX syntax, i'm receiving the following error:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of xxx Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of xxx .

Up to this point in the other areas of my app I've always included the react components thusly:

ReactDOM.render(<MyComponent />, $("#reactTarget")[0]);

That has always worked. But now that I've bought in to the browserify world to chain these source files together, if i include the line

var MyComponent = require('./MyComponent.jsx');

...and then proceed to try to include an instance of the component with:

ReactDOM.render(<MyComponent />, $("#reactTarget")[0]);

I receive the error above. Now given that all of this is new and somewhat fuzzy to me, i'm not 100% sure that it's the browserify aspect of this which is causing the issue, but it sure feels like it.

I've also tried react.createClass , passing in the 'MyComponent' variable from the requires line, but no joy.

I have this mostly working but of course putting the data on the screen - in this case using react - is the whole point of the thing so, the fact that i now have a functional dispatcher, actions, stores and API calls is exciting but i can no longer simply compose my react components as i used to.

what am i missing here? There must be a way to combine these techniques and technologies but i haven't been able to find an example that equates to this particular combination.

Thanks in advance.

Answer 1

I sometimes wonder what life would be like if I were a smarter animal. I've just spent an entire day - a weekend day, no less, chasing down phantom solutions and alternate configurations until I wanted to cry when in fact my issue was that I'd left off the 's' in module.exports at the end of my component definition. That bloody 's' cost me years of my life, I suspect. That's what I get for not copying/pasting when I'm toying with tings I barely understand. I guess I learned a lot in the process, maybe I'll get those hours back over time.

Thanks to anyone who made an effort here, or even pondered it at all.