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";