Error: Invariant Violation: Element type is invalid

tribou commented 8 years ago

If I try to convert your layout example to use ES6 classes, I'm getting an error. However, I am able to convert the home.jsx.

For example, changing only the home.jsx works with:

const React = require('react');
const Layout = require('./layout.jsx');

export default class Component extends React.Component {
    render() {

        return (
            <Layout title="Home Page">
                <h1>Welcome to the plot device.</h1>
            </Layout>
        );
    }
}

However, when I convert the layout.jsx file as well like this:

const React = require('react');

export default class Component extends React.Component {
    render() {

        return (
            <html>
                <head>
                    <title>{this.props.title}</title>
                </head>
                <body>
                    {this.props.children}
                    <hr />
                    <p>
                        <a href="/">Home</a> | <a href="/about">About Us</a>
                    </p>
                </body>
            </html>
        );
    }
}

I get this 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 `Component`.
Debug: internal, implementation, error
    Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Component`.: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Component`.
    at invariant (/Users/user/dev/hapi-react-views/node_modules/fbjs/lib/invariant.js:39:15)
    at [object Object].instantiateReactComponent [as _instantiateReactComponent] (/Users/user/dev/hapi-react-views/node_modules/react/lib/instantiateReactComponent.js:64:134)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/user/dev/hapi-react-views/node_modules/react/lib/ReactCompositeComponent.js:223:36)
    at [object Object].wrapper [as mountComponent] (/Users/user/dev/hapi-react-views/node_modules/react/lib/ReactPerf.js:66:21)
    at /Users/user/dev/hapi-react-views/node_modules/react/lib/ReactServerRendering.js:70:32
    at ReactServerRenderingTransaction.Mixin.perform (/Users/user/dev/hapi-react-views/node_modules/react/lib/Transaction.js:136:20)
    at Object.renderToStaticMarkup (/Users/user/dev/hapi-react-views/node_modules/react/lib/ReactServerRendering.js:68:24)
    at runtime (/Users/user/dev/hapi-react-views/index.js:31:58)
    at Object.renderer (/Users/user/dev/hapi-react-views/node_modules/vision/lib/manager.js:141:36)
    at [object Object].internals.Manager._loadPartials.internals.Manager._loadHelpers.internals.Manager.render.internals.Manager._prepare.internals.Manager._prepareEngine.internals.Manager._prepareTemplates.callback._path.internals.Manager._path.internals.Manager._render.compiled.template [as _render] (/Users/user/dev/hapi-react-views/node_modules/vision/lib/manager.js:468:14)

Am I implementing this correctly?

tkh44 commented 8 years ago

If you are using babel 6 and use the "require" syntax instead of "import" you must reference a default export as a property. For the Layout component it would look like:

const Layout = require('./layout.jsx').default;

Using the es6 modules syntax would work also.

import Layout from './layout.jsx';

You can see more information in this StackOverflow answer.

tribou commented 8 years ago

That worked. Thanks, @tkh44!

jedireza / hapi-react-views

Error: Invariant Violation: Element type is invalid #44