How can i route my Home component from the code below without throwing uncaught TypeError in the console

user_19326176 0
Viewed 31

I'm having troubles displaying the Home component. How can I get this to work?

console display Uncaught TypeError: Cannot read properties of undefined (reading 'string') at ./node_modules/react-icon/lib/index.js

I'm using

    my versions are: 
     "react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icon": "^1.0.0",
"react-icons": "^4.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",

And my codes are:

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom' 


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
);

My codes are:

Navbar.js

import React from 'react'
import './NavbarStyles.css'
import Logo from '../assets/logo.png'
import {Link} from 'react-router-dom'
import {FaBars,} from 'react-icon'

const Navbar = () => {
  return (
    <header>
        <nav className='navbar'>
            <div className='logo'>
                <Link to='/'><img src={Logo} alt='' /></Link>
            </div>
            <ul className='nav-menu'>
                <li className='nav-item'>
                    <Link to='/' className='nav-link'>Home</Link>
                </li>
                <li className='nav-item'>
                    <Link to='/' className='nav-link'>Services</Link>
                </li>
                <li className='nav-item'>
                    <Link to='/' className='nav-link'>Events</Link>
                </li>
                <li className='nav-item'>
                    <Link to='/' className='nav-link'>Contact</Link>
                </li>
            </ul>
            <div className='hamburger'>
                <FaBars />
            </div>
        </nav>
    </header>
  )
}

export default Navbar;

My codes are:

App.js

import React from 'react';
import {Routes, Route} from 'react-router-dom';
import Home from './components/Home';

function App() {
  return (
    <>
    <Routes>
      <Route path='/' element={<Home />} />
    </Routes>
    </>
  );
}

export default App;

My codes are:

Home.js

import React from 'react'
import './HomeStyles.css'
import Navbar from './Navbar'

const Home = () => {
  return (
    <div>
        <Navbar />
    </div>
  )
}

export default Home;
react-icons reactjs javascript
2 Answers

Issue

I think the issue is in the NavBar component. It is trying to import a named export from react-icon. react-icon doesn't export any specific icon components, instead it exports a single default export (i.e. import Icon from 'react-icon';) that uses props to specify which icon should be rendered. react-icon looks like an older/outdated package that fails to work with newer versions (React 15.5+) of React.

react-icon/src/index.js

const React = require('react');

const Icon = React.createClass({
  displayName: 'Icon',
  propTypes: {
    glyph: React.PropTypes.string.isRequired, // <-- issue likely here
    classPrefix: React.PropTypes.string,
    children: React.PropTypes.node
  },
  statics: {
    defaultFontPrefix: 'fa',
    setDefaultFontPrefix(prefix) {
      Icon.defaultFontPrefix = prefix;
    }
  },
  render() {
    const prefix = this.props.classPrefix || Icon.defaultFontPrefix;
    let className = `${prefix} ${prefix}-${this.props.glyph}`;
    if (this.props.className) {
      className += ` ${this.props.className}`;
    }

    return (
      <span {...this.props} className={className}>
        {this.props.children}
      </span>
    );
  }
});

module.exports = Icon;

React removed the PropTypes into its own package since React 15.5, so in the code above React.PropTypes is undefined and throws an error when trying to access the string property object.

Solution

Import the FaBars icon from react-icons instead of react-icon.

import React from 'react';
import './NavbarStyles.css';
import Logo from '../assets/logo.png';
import { Link } from 'react-router-dom';
import { FaBars } from 'react-icons'; // <-- import from `react-icons`

const Navbar = () => {
  return (
    <header>
      <nav className='navbar'>
        <div className='logo'>
          <Link to='/'><img src={Logo} alt='' /></Link>
        </div>
        <ul className='nav-menu'>
          <li className='nav-item'>
            <Link to='/' className='nav-link'>Home</Link>
          </li>
          <li className='nav-item'>
            <Link to='/' className='nav-link'>Services</Link>
          </li>
          <li className='nav-item'>
            <Link to='/' className='nav-link'>Events</Link>
          </li>
          <li className='nav-item'>
            <Link to='/' className='nav-link'>Contact</Link>
          </li>
        </ul>
        <div className='hamburger'>
          <FaBars />
        </div>
      </nav>
    </header>
  );
};

You'll probably want to also remove react-icon from your project since it's so outdated. As of today (13/06/2022) the repo hasn't had an update in 7 years! Uninstall it by running the following command from the project's root directory.

npm uninstall --save react-icon
user_86908570 
import React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom' 


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
);

try like this

user_181222970
Related