Home > Software engineering >  I want to ask when I import prop type an error occurred
I want to ask when I import prop type an error occurred

Time:11-26

I am doing the basic react app and prop type error has occurred in my application
./src/component/Navbar.js Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\Prop-types\prop-types'.

import React from "react";
import PropTypes from 'Prop-types';

export default function Navbar(props) {
    return (
        
        

<nav className="navbar navbar-expand-lg navbar-light bg-light">
  <div className="container-fluid">
    <a className="navbar-brand" href="/">{props.title}</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav me-auto mb-2 mb-lg-0">
        <li className="nav-item">
          <a className="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="/">{props.AboutText}</a>
        </li>
        
      </ul>
      <form className="d-flex">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


    )
}


Navbar.propTypes = {
  title: PropTypes.string,
  aboutText: PropTypes.string 
}

Navbar.defaultProps = {
  title: 'Set title here',
  aboutText: ''
};

CodePudding user response:

The name of your import is slightly wrong. Javascript imports are case sensitive, so it should be following.

import PropTypes from 'prop-types';

Notice the case of prop-types.

Also ensure prop-types is present in your package.json as a dependency already. Refer the installation guide for reference.

CodePudding user response:

Looks like you are importing prop-types incorrectly. p should be in lower case in prop-types. Please update your import as:

import PropTypes from "prop-types";
  • Related