引导反应./node_modules/bootstrap/dist/js/bootstrap.min.js 找不到模块：无法解析'jquery'

Posted 2023-02-22

【中文标题】引导反应./node_modules/bootstrap/dist/js/bootstrap.min.js 找不到模块：无法解析\'jquery\'

【英文标题】：Bootstrap react ./node_modules/bootstrap/dist/js/bootstrap.min.js Module not found: Can't resolve 'jquery'引导反应./node_modules/bootstrap/dist/js/bootstrap.min.js 找不到模块：无法解析'jquery'

【发布时间】：2021-07-18 14:21:20

【问题描述】：

错误： 使用引导程序添加导航栏时出现以下错误。

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

./node_modules/bootstrap/dist/js/bootstrap.min.js 未找到模块： 无法解析“jquery” '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')
);

【参考方案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