导入react-bootstrap时Webpack构建源映射缺失警告求助

问题描述 #

导入react-bootstrap组件时，Webpack构建抛出以下警告：

WARNING in ./node_modules/@react-aria/ssr/dist/SSRProvider.mjs
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from C:\Users\avner\Documents\FullStack\AllStar\templates\authentication system\frontend_var2\node_modules@react-aria\ssr\dist\SSRProvider.mjs.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\avner\Documents\FullStack\AllStar\templates\authentication system\frontend_var2\node_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;

项目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"
    ]
  }
}

已尝试无效操作：

• 添加// eslint-disable-next-line注释
• 卸载重装react-bootstrap
• 重新搭建项目

解决方案 #

方案1：通过Craco修改Webpack配置，排除特定模块的Source Map检查

由于react-scripts默认不允许直接修改Webpack配置，需使用craco工具：

1. 安装Craco：

npm install @craco/craco --save-dev

2. 修改package.json中的启动脚本：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

3. 在项目根目录创建craco.config.js，添加如下配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const sourceMapLoaderRule = webpackConfig.module.rules.find(rule => 
        rule.loader === 'source-map-loader'
      );
      if (sourceMapLoaderRule) {
        // 排除@react-aria/ssr模块的source map检查
        sourceMapLoaderRule.exclude = /@react-aria\/ssr/;
      }
      return webpackConfig;
    }
  }
};

4. 重启项目，警告即可消除。

方案2：降级React-Bootstrap版本

该警告可能是react-bootstrap@2.10.2依赖的@react-aria/ssr包存在source map文件缺失问题，可尝试降级到上一版本：

npm install react-bootstrap@2.10.1

方案3：临时禁用所有Source Map生成（不推荐）

在项目根目录的.env文件中添加：

GENERATE_SOURCEMAP=false

此方法会关闭所有source map生成，虽能消除警告，但会影响开发调试体验，仅适合临时测试使用。

内容的提问来源于stack exchange，提问作者Avner Mushnik