Console error that I cannot find the solution to

Question

I continue to get the error below in the console. I have tried implicitly returning these components, setting them as both named AND default exports and also imported them as so. Any suggestions or input would be greatly appreciated.

Uncaught 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 'Header'

AppRouter Component:

import React from 'react';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import AboutPage from '../components/AboutPage';
import ContactPage from '../components/ContactPage';
import ErrorPage from '../components/ErrorPage';
import Header from '../components/Header';
import HomePage from '../components/HomePage';

const AppRouter = () => (
    <BrowserRouter> 
        <div>
            <Header />
            <Switch>
                <Route path='/' component={HomePage} exact={true}/>
                <Route path='/about' component={AboutPage}/>
                <Route path='/contact' component={ContactPage}/>
                <Route component={ErrorPage}/>
            </Switch>    
        </div>   
    </BrowserRouter>
);

export default AppRouter;

Header Component:

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => (
    <div>
        <h1>FRD</h1>
        <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
        <NavLink to='/about' activeClassName='is-active'>About</NavLink>
        <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
    </div>
);

export default Header;```

Does this solves your problem https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string — DevLoverUmar, Jul 08 '20 at 22:13
I also tried that before posting! It doesn't seem to matter which import I use, default or named. — Matt Miller, Jul 08 '20 at 22:23

score 0 · Answer 1 · answered Jul 08 '20 at 22:16

0

Change your Header component like this

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => {
return (
    <div>
        <h1>FRD</h1>
        <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
        <NavLink to='/about' activeClassName='is-active'>About</NavLink>
        <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
    </div>
);
}
export default Header;

answered Jul 08 '20 at 22:16

DevLoverUmar

11,809
11
68
98

1

I tried that just before I posted this - still the same error! Edit: tried again just to confirm. – Matt Miller Jul 08 '20 at 22:19

score 0 · Answer 2 · answered Jul 08 '20 at 22:23

Have a good read of classes and how they function but also components first. https://reactjs.org/docs/components-and-props.html#functional-and-class-components and https://medium.com/@leannezhang/curly-braces-versus-parenthesis-in-reactjs-4d3ffd33128f and then you shall understand what is going on.

    const Header = () => {
return (
    <div>
        <h1>FRD</h1>
        <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
        <NavLink to='/about' activeClassName='is-active'>About</NavLink>
        <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
    </div>
);
}

score 0 · Answer 3 · answered Jul 08 '20 at 22:54

Try changing the following:

const Header = () => (
    <div>
        <h1>FRD</h1>
        <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
        <NavLink to='/about' activeClassName='is-active'>About</NavLink>
        <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
    </div>
);

to

function Header() {
  return (  
      <div>
          <h1>FRD</h1>
          <NavLink to='/' activeClassName='is-active' exact={true}>Home</NavLink>
          <NavLink to='/about' activeClassName='is-active'>About</NavLink>
          <NavLink to='/contact' activeClassName='is-active'>Contact</NavLink>
      </div>);
}

or alternatively, in AppRouter try the following.

<BrowserRouter> 
        <div>
            {Header}
            <Switch>
....

Neither seem to do the trick. My hair is beginning to be pulled out. — Matt Miller, Jul 08 '20 at 23:07
If you rename it from Header to something that is not in use. (Since it’s the default export you can can rename only the name when importing, but I’d try to rename it all the way) — idoshveki, Jul 09 '20 at 06:15

Console error that I cannot find the solution to

3 Answers3