Search code examples
jquerybrowserifyreactjs

Mounting a React component that was required with browserify


I have a component that was written in a second file that has two exports, an "images" export and a "modal" export. In my host file I include both and mount them during a callback of an ajax/jquery load request. My site structure is such that each load is represented by an actual static url end point (for example, url.com/sub/item is completely navigable but for some dynamic fun in my use case I load them into wrappers on url.com providing ajax works - it was more a test of "can I do it" - less "do I need to."

The components work great on their own on the static page. On the loaded page - Images works but the other (Modal) crashes the whole party.

here's the console error I am getting"

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).
Warning: Only functions or strings can be mounted as React components.

Here's how I am mounting the trouble child:

if ($('.modal-images').length){
 $('body').append('<section id="modal-loader"></section>');
  // This breaks stuff like a drunk bull in the chicken coup.
   React.render(<Modal />, document.getElementById('modal-loader'));
}

And here's the whole party in context:
https://gist.github.com/motleydev/d763ebf6a9116ed05ea6


Solution

  • Whats happening is that at some point one of your <Component/> is being used where Component is undefined. I would make sure that Modal actually exists in the file as the value you expect.