Webpack 构建中出现警告：从 React-bootstrap 导入时出现“WARNING in ./node_modules/@react-aria/ssr/dist/SSRProvider.mjs”

Question

当我从react-bootstrap导入组件时，我收到以下警告消息：

./node_modules/@react-aria/ssr/dist/SSRProvider.mjs 中的警告 模块警告（来自 ./node_modules/source-map-loader/dist/cjs.js）： 无法从 C:\Users vner\Documents\FullStack\AllStar 解析源映射，验证系统 rontend_var2 ode_modules@react-aria\ssr\dist\SSRProvider.mjs.map' 文件：错误：ENOENT：没有这样的文件或目录，打开 'C:\Users vner\Documents\FullStack\AllStar emplates 认证系统 rontend_var2 ode_modules@react-aria\ssr\dist\SSRProvider.mjs.map'

这是我的代码：

import { NavLink } from "react-router-dom";
import { Container, Nav, Navbar } from "react-bootstrap";

const MainNavbar = () => {
  return (
    <Navbar bg="primary" data-bs-theme="dark" className="text-white">
      <Container>
        <Navbar.Brand as={NavLink} to="/">
          LOGO
        </Navbar.Brand>        
          <Nav className="ms-auto">
            <Nav.Link as={NavLink} to="/login">
              Login
            </Nav.Link>
            <Nav.Link as={NavLink} to="/signup">
              Signup
            </Nav.Link>
          </Nav>      
      </Container>
    </Navbar>
  );
};

export default MainNavbar;

但是，如果我直接使用 Bootstrap 类（例如，

<div className="container">

），该消息就会消失，但随后我就失去了 React-Bootstrap 的功能。

这是我的 package.json 文件：

{
  "name": "react_template",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.x",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.10.2",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.23.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "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"
    ]
  }
}

如果您能帮助解决此问题，我将不胜感激。

我尝试了多种方法来解决警告消息，但都没有成功。最初，我在react-bootstrap组件的导入语句上方添加了行 // eslint-disable-next-line ，如下所示：

// eslint-disable-next-line
import { Container, Nav, Navbar, NavDropdown } from "react-bootstrap";

但是，这并没有帮助消除警告。此外，我完全删除了react-bootstrap包并重新安装了它，但问题仍然存在。我什至尝试从头开始重写整个项目，希望它可以解决任何隐藏的问题，但不幸的是，这也不起作用。我还在网上广泛搜索了解决方案，特别是对于通过从react-bootstrap导入组件而触发错误的情况，但我还没有找到任何解决此特定场景的解决方案。

我期望其中一种方法可以解决该警告，但实际发生的情况是，无论采取什么措施，该警告都会继续出现。

Answer 1

我也有类似的问题。我认为导入有问题。 我认为可以通过使用react-bootstrap主页上提供的导入方法逐行编写来解决。 希望你能尝试一下

在此输入图片描述