Uncaught TypeError: Super expression must either be null or a function, not undefined

[vancouverwill]

Hey first up, just want to say this a cool repo. Anyway I am having some issues with the setup and just wondering if there is something obvious I am missing but I am getting this exception

Uncaught TypeError: Super expression must either be null or a function, not undefined

My package.json file looks like this

"dependencies": {
    "react": "^0.12.2",
    "react-addons": "^0.9.0",
    "react-dom": "^0.14.0",
    "react-preload": "^0.2.2",
    "react-tools": "*",
    "requirejs": "*"
  },
  "devDependencies": {
    "babelify": "^6.3.0",
    "watchify": "^3.4.0"
  }

and I start my react file off like below but I get the exception straight away, I expect there is something in my setup missing but not sure yet. Fyi I am using browserify to build my js, thanks. Will

var React = require('react/addons');
var Preload = require('react-preload').Preload; 

[sambernard]

Hey-

What version of react are you using? Also- if you remove the Preload component from your component class, does the issue disappear?

[vancouverwill]

Hey Sam

Good point, I updated React to 0.14.0 and fixed some dependencies and don't have any exceptions now. Is this the version of React you recommend?

thanks

Will

[vancouverwill]

UPDATE :

In your example did you just drop a react component in here?

 {/* content to be rendered once loading is complete*/}

My render function looks like the below and I get this exception now 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).

render: function() {

          var loadingIndicator = (<div>Loading...</div>)
          var images = ["images/brazil1.jpg","images/brazil2.jpg"];

          return (
            <Preload
              loadingIndicator={loadingIndicator}
              images={images}
              autoResolveDelay={3000}
              onError={this._handleImageLoadError}
              onSuccess={this._handleImageLoadSuccess}
              resolveOnError={true}
              mountChildren={true}
              >
                {
                  /* content to be rendered once loading is complete*/ 
                  <Container />
                }
            </Preload>
            )
        }

Thanks for all the help

Will

[sambernard]

Will-

React 0.13 or up is definitely recommended.

The content can be any valid react Component. The error you are getting is because you have it wrapped in the {} braces and left the comment in - leave just your container and you should be good.

[vancouverwill]

Hey Sam

Sorry to bug you on the wk, but just trying to debug how you got this setup. Here is a screen shot from dev tools showing the var Preload being returned as undefined

and I get the same error message as below, it seems Preload is not being recognized as a React Class. Is this possibly because I am not using ES6 rather just doing it with jsx?

Thanks

Will

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).

[vancouverwill]

Hey Sam

Sorry to bother you again but last try with the module here.

I tried with a blank repo with just react and a very simple test class with nothing complicated about it so I could see what is going on and still I get the same error as above, I put it in the below repo. Is there anything else I am missing because it seems like there is a big step that I am completely missing out on as right now it isn't getting any where at all.

https://github.com/vancouverwill/preloadReactTest0.13.0

for what it's worth I did try with 0.14 but no luck there either

https://github.com/vancouverwill/preloadReactTest0.14.0

thanks

Will