CODEWITHSUNDEEP
javascriptreactjstypescript
FarmBoy
FarmBoy

Reputation: 131

Newbie to React => Element type is invalid: expected a string

I am going around in circles with the following when trying to load the basics of a React app into the browser.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

The code is as follows (test.tsx)

    /// <reference path="./typings/tsd.d.ts" />

    import * as React from "react";
    import * as ReactDOM from 'react-dom'


    ReactDOM.render(
            <TodoApp name="jim"/>, document.getElementById('root')
    );

    class TodoApp extends React.Component<any, any>{
        constructor(props) {super(props); this.state = {};}

        render() {
            return (
                <div>
                    <button>hit me</button>
                </div>
            )
        }
    }

export default TodoApp;

test.html

<html>
    <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>      
    </body>
</html>

the tsx is complied and bundled with Browserify and the error is occuring in the bundle.js

specifically @ instantiateReactComponent(node) & the invariant function

Many thanks in advance !!

Upvotes: 2

Views: 420

Answers (1)

azium
azium

Reputation: 20614

You're calling render and passing in a component before you have defined it.

// won't work!
var person = new Person() <-- undefined
class Person {}

// will work
class Person {}
var person = new Person()

Classes do not get 'hoisted' like functions do.

Upvotes: 3

Related Questions