[英]I have module not found error while working with react-bootstrap. Have tried all the steps
My package.json file我的 package.json 文件
{
"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和我的 Navbar.js 文件
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还有我的 App.js 文件
// 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' ./src/components/Navbar.js 未找到模块:无法在“C”中解析“C:\Users\Harish\react\oil\node_modules\react-scripts\node_modules\babel-loader\lib\index.js” :\用户\哈里什\反应\油'
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我的 package.json 文件
{
"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和我的 Navbar.js 文件
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还有我的 App.js 文件
// 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' ./src/components/Navbar.js 未找到模块:无法在“C”中解析“C:\Users\Harish\react\oil\node_modules\react-scripts\node_modules\babel-loader\lib\index.js” :\用户\哈里什\反应\油'
I think the problem might be in the implementation part, Can anyone help me with this?I am pretty new to react我认为问题可能出在实施部分,有人可以帮我解决这个问题吗?我对反应很陌生
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.