0

I've got a boilerplate based on https://github.com/coryhouse/react-slingshot/. I've removed the FuelSavings app and replaced it with one that works OK - but I wrote a component, and when I include it under the App, it prevents anything from rendering (I get a white page).

I'm getting 3 errors when I add in the <UserHeader /> tag into App.js:

  • "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 App."
  • Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of App.
  • Uncaught TypeError: Cannot read property 'props' of undefined

If I remove the UserHeader tag, the rest of the page loads just fine.

src/components/App.js

import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';
import { UserHeader } from './UserHeader';

const App = (props) => {
  return (
    <div>
      <IndexLink to="/">Home</IndexLink> | <Link to="/About">About</Link>
      <UserHeader />

      {props.children}
    </div>
  );
};

export default App;

src/components/UserHeader.js

import React, { Component, PropTypes } from 'react';

const UserHeader = (props) => {
  return (
    <p>Welcome!</p>
    );
};

export default UserHeader;

Any thoughts welcomed. The server itself shows no problems at all, just a warning about missing the props validation. The issue is preventing any code in UserHeader from executing. I'm just not experienced enough to know how!

charlie
  • 181
  • 13

1 Answers1

2

This:

import { UserHeader } from './UserHeader'

should be:

import UserHeader from './UserHeader'

because UserHeader is the default export.

pfkurtz
  • 494
  • 3
  • 7