React应用白屏无报错，仅出现Webpack Dev Server弃用警告求助

一、处理Webpack Dev Server的弃用警告 #

你看到的警告是因为Webpack Dev Server的onAfterSetupMiddleware和onBeforeSetupMiddleware配置项已被废弃，需要替换成setupMiddlewares：

1. 找到你的Webpack配置文件（比如webpack.config.js，如果用了Create React App且自定义配置，可能是craco.config.js或react-app-rewired的配置文件）
2. 替换原有配置：
   旧写法示例：

   devServer: {
     onBeforeSetupMiddleware: (devServer) => {
       // 你的中间件逻辑
     },
     onAfterSetupMiddleware: (devServer) => {
       // 你的中间件逻辑
     }
   }
   

   改为新的setupMiddlewares写法：

   devServer: {
     setupMiddlewares: (middlewares, devServer) => {
       // 原来onBeforeSetupMiddleware的逻辑可以放在这里（在现有中间件前执行）
       // 比如添加自定义路由中间件
       devServer.app.use('/test', (req, res) => {
         res.send('测试内容');
       });
   
       // 返回修改后的中间件数组
       return middlewares;
     }
   }
   

3. 重启开发服务器，警告应该会消失。

二、排查空白屏问题（无报错情况下） #

注意：上述弃用警告本身不会导致应用空白，重点排查以下几点：

• 确认根组件渲染逻辑：
  检查index.js是否正确挂载App组件，同时确保public/index.html里存在id="root"的DOM节点：

  // index.js 正确示例
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
  

  <!-- public/index.html 里的根节点 -->
  <div id="root"></div>
  

• 检查组件返回值：
  确保App组件或子组件的所有分支都有返回值，比如不要出现以下情况：

  // 错误示例：条件不满足时无返回
  function App() {
    if (someCondition) {
      return <div>内容</div>;
    }
    // 这里没有return，会导致空白
  }
  

  可以添加默认返回，比如return null或空标签<></>。
• 排查样式问题：
  打开浏览器F12开发者工具，切换到Elements面板，查看App组件的DOM是否存在，检查是否有display: none、opacity: 0或position: absolute导致内容被隐藏/移出屏幕。
• 暂时关闭StrictMode：
  有些第三方库在React StrictMode下会出现异常，暂时去掉<React.StrictMode>标签，重启项目看是否恢复正常。
• 查看隐藏的控制台报错：
  切换浏览器Console面板的标签到"All"，查看是否有被过滤的报错信息（比如某些库的静默错误）。
• 重置依赖：
  删除node_modules文件夹和package-lock.json（或yarn.lock），重新执行npm install或yarn install，解决可能的依赖版本冲突问题。

内容的提问来源于stack exchange，提问作者Stelvy Anselmo