My package.json file
{
"name": "oil",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "^4.6.0",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
and my Navbar.js file
import React, { Component } from "react";
import * as ReactBootstrap from "react-bootstrap";
const Navbar = () => {
return (
<div>
<ReactBootstrap.Nav
activeKey="/home"
onSelect={(selectedKey) => alert(`selected ${selectedKey}`)}
>
<ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Link href="/home">Active</ReactBootstrap.Nav.Link>ReactBootstrap.
</ReactBootstrap.Nav.Item>
<ReactBootstrap.ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Link eventKey="link-1">Link</ReactBootstrap.Nav.Link>
</ReactBootstrap.ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Link eventKey="link-2">Link</ReactBootstrap.Nav.Link>
</ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Link eventKey="disabled" disabled>
Disabled
</ReactBootstrap.Nav.Link>
</ReactBootstrap.Nav.Item>
</ReactBootstrap.Nav>
</div>
)
}
export default Navbar
And my App.js file
// import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar'
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<Navbar />
<h2>city guide</h2>
</div>
);
}
export default App;
I get the following error
./src/components/Navbar.js Module not found: Can't resolve 'C:\Users\Harish\react\oil\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in 'C:\Users\Harish\react\oil'
I think the problem might be in the implementation part, Can anyone help me with this?I am pretty new to react
My package.json file
{
"name": "oil",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "^4.6.0",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
and my Navbar.js file
import React, { Component } from "react";
import * as ReactBootstrap from "react-bootstrap";
const Navbar = () => {
return (
<div>
<ReactBootstrap.Nav
activeKey="/home"
onSelect={(selectedKey) => alert(`selected ${selectedKey}`)}
>
<ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Link href="/home">Active</ReactBootstrap.Nav.Link>ReactBootstrap.
</ReactBootstrap.Nav.Item>
<ReactBootstrap.ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Link eventKey="link-1">Link</ReactBootstrap.Nav.Link>
</ReactBootstrap.ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Link eventKey="link-2">Link</ReactBootstrap.Nav.Link>
</ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Item>
<ReactBootstrap.Nav.Link eventKey="disabled" disabled>
Disabled
</ReactBootstrap.Nav.Link>
</ReactBootstrap.Nav.Item>
</ReactBootstrap.Nav>
</div>
)
}
export default Navbar
And my App.js file
// import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar'
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<Navbar />
<h2>city guide</h2>
</div>
);
}
export default App;
I get the following error
./src/components/Navbar.js Module not found: Can't resolve 'C:\Users\Harish\react\oil\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in 'C:\Users\Harish\react\oil'
I think the problem might be in the implementation part, Can anyone help me with this?I am pretty new to react
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.