Javascript Bootstrap react./node_modules/Bootstrap/dist/js/Bootstrap.min.js未找到模块：Can'；t解决'；jquery'；

错误： 我在使用引导添加导航栏时发现以下错误

若我并没有导入jquery部件，那个么它可以工作，但崩溃不起作用，但当我添加jquery部件时，它给出了以下错误

./node_modules/bootstrap/dist/js/bootstrap.min.js未找到模块： 无法解析中的“jquery” 'D:\react\covid\client\node\u modules\bootstrap\dist\js'

导航栏组件

import React from "react";

const Navbar = () => {
  return (
    <div>
      <nav className="navbar navbar-expand-md navbar-dark bg-dark">
      <div className="container">
        <a className="navbar-brand" href="#">
          Covid Info
        </a>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul className="navbar-nav ml-auto">
            <li className="nav-item active ml-3">
              <a className="nav-link" href="www.google.com">
                Home <span className="sr-only">(current)</span>
              </a>
            </li>
            <li className="nav-item ml-3">
              <a className="nav-link" href="#">
                Oxygen
              </a>
            </li>
            <li className="nav-item ml-3">
              <a className="nav-link" href="#">
                Beds
              </a>
            </li>
            <li className="nav-item ml-3">
              <a className="nav-link" href="#">
                Helpline
              </a>
            </li>
          </ul>
        </div>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;

import React from "react";
import Navbar from "./components/Navbar";

function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/js/bootstrap.min.js";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

从“React”导入React；
常量导航栏=（）=>{
返回(










);
};
导出默认导航栏；

应用程序组件

import React from "react";

const Navbar = () => {
  return (
    <div>
      <nav className="navbar navbar-expand-md navbar-dark bg-dark">
      <div className="container">
        <a className="navbar-brand" href="#">
          Covid Info
        </a>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul className="navbar-nav ml-auto">
            <li className="nav-item active ml-3">
              <a className="nav-link" href="www.google.com">
                Home <span className="sr-only">(current)</span>
              </a>
            </li>
            <li className="nav-item ml-3">
              <a className="nav-link" href="#">
                Oxygen
              </a>
            </li>
            <li className="nav-item ml-3">
              <a className="nav-link" href="#">
                Beds
              </a>
            </li>
            <li className="nav-item ml-3">
              <a className="nav-link" href="#">
                Helpline
              </a>
            </li>
          </ul>
        </div>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;

import React from "react";
import Navbar from "./components/Navbar";

function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/js/bootstrap.min.js";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

从“React”导入React；
从“/components/Navbar”导入导航栏；
函数App（）{
返回(
);
}
导出默认应用程序；

index.js组件

import React from "react";

const Navbar = () => {
  return (
    <div>
      <nav className="navbar navbar-expand-md navbar-dark bg-dark">
      <div className="container">
        <a className="navbar-brand" href="#">
          Covid Info
        </a>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul className="navbar-nav ml-auto">
            <li className="nav-item active ml-3">
              <a className="nav-link" href="www.google.com">
                Home <span className="sr-only">(current)</span>
              </a>
            </li>
            <li className="nav-item ml-3">
              <a className="nav-link" href="#">
                Oxygen
              </a>
            </li>
            <li className="nav-item ml-3">
              <a className="nav-link" href="#">
                Beds
              </a>
            </li>
            <li className="nav-item ml-3">
              <a className="nav-link" href="#">
                Helpline
              </a>
            </li>
          </ul>
        </div>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;

import React from "react";
import Navbar from "./components/Navbar";

function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/js/bootstrap.min.js";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
导入“./node\u modules/jquery/dist/jquery.min.js”；
导入“./node_modules/bootstrap/dist/js/bootstrap.min.js”；
ReactDOM.render(
,
document.getElementById（'root'））
);

这对我很有用

安装jQuery npm包：

npm install --save jquery

npm install popper.js --save

然后像这样导入：

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";

之后，将引发另一个错误：

错误：“未找到模块：无法解析popper.js”

要解决此问题，请安装Popper.js npm包：

npm install --save jquery

npm install popper.js --save