javascript - Bootstrap react ./node_modules/bootstrap/dist/js/bootstrap.min.js 找不到模块: Can't resolve 'jquery'

Question

错误: 我在使用 Bootstrap 添加导航栏时遇到以下错误。

如果我没有导入 jquery 部分，它可以工作，但折叠不起作用，但是当我添加 jquery 部分时，它会给出以下错误

./node_modules/bootstrap/dist/js/bootstrap.min.js Module not found: Can't resolve 'jquery' in 'D:\react\covid\client\node_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;

index.js 组件

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')
);

Answer 1

这对我有用。

安装 jQuery npm 包:

npm install --save jquery

然后像这样导入:

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

之后引发另一个错误:

错误:“找不到模块:无法解析 popper.js”

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

npm install popper.js --save