Laravel项目中React DevTools无法识别开发模式的排查求助

我正尝试让React DevTools在Laravel项目中启用Profiler功能，但工具提示项目未处于开发模式。React版本为v18.2，满足Profiler所需的v16.5+要求。Vue DevTools可以识别开发模式，但React DevTools在Firefox和Chrome中均无法识别，推测问题出在React层面。

我的.env文件中配置了APP_ENV=local，当前使用npm run build --watch命令构建项目。

项目配置 #

package.json #

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch",
        "clean": "vite clean"
    },
    "devDependencies": {
        "@headlessui/react": "^1.4.2",
        "@inertiajs/react": "^1.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@vitejs/plugin-react": "^3.0.0",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.12",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.18",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "source-map": "^0.7.4",
        "tailwindcss": "^3.2.1",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.4.2",
        "@fortawesome/free-regular-svg-icons": "^6.4.2",
        "@fortawesome/free-solid-svg-icons": "^6.4.2",
        "@fortawesome/react-fontawesome": "^0.2.0",
        "@reduxjs/toolkit": "^1.9.5",
        "d3": "^7.8.4",
        "react-hot-toast": "^2.4.1",
        "react-redux": "^8.1.2",
        "react-select": "^5.7.3",
        "unop-react-dropdown": "^0.2.3"
    }
}

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig(({command, mode}) => {
    console.log('Vite mode:', mode);

    return {
        plugins: [
            laravel({
                input: 'resources/js/app.jsx',
                refresh: true,
            }),
            react(),
        ],
        define: {
            'process.env.APP_ENV': JSON.stringify(mode),
        },
    };
});

我参考其他方案添加了process.env.APP_ENV的定义，但并未解决问题。以下是可排查的方向：

• 切换到正确的开发构建命令：npm run build --watch本质是生产构建模式（vite build默认使用production模式），即使添加watch参数也不会启用开发环境的调试特性。应该改用npm run dev启动Vite开发服务器，这才是React DevTools需要的开发环境。
• 验证React构建版本：在浏览器控制台执行以下代码，确认是否为开发构建：

  console.log(React.version);
  console.log(!!window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactDebugCurrentFrame);
  

  第二个输出为true则是开发构建，否则是生产构建，说明Vite没有加载开发版React。
• 修正Vite的环境变量配置：React主要通过process.env.NODE_ENV判断环境，之前仅配置了APP_ENV可能不足。修改vite.config.js，同时指定NODE_ENV，并确保watch模式下自动切换到development：

  export default defineConfig(({command, mode}) => {
      const isWatch = process.argv.includes('--watch');
      const actualMode = isWatch ? 'development' : mode;
      console.log('Vite mode:', actualMode);
  
      return {
          plugins: [
              laravel({
                  input: 'resources/js/app.jsx',
                  refresh: true,
              }),
              react(),
          ],
          define: {
              'process.env.NODE_ENV': JSON.stringify(actualMode),
              'process.env.APP_ENV': JSON.stringify(actualMode),
          },
      };
  });
  

  或者执行构建时显式指定模式：npm run build --watch --mode development。
• 检查Laravel-Vite插件配置：查看Laravel的config/vite.php文件，确认是否有强制生产模式的配置，避免插件覆盖了Vite的环境设置。
• 清除缓存后重新构建：执行npm run clean清除Vite缓存，再重新启动开发服务器或构建命令，避免旧的生产构建文件被浏览器或Vite缓存。
• 更新React DevTools扩展：确保浏览器安装的React DevTools是最新版本，旧版本可能与React 18存在兼容性问题。

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