React devtools not recognising dev mode in laravel

Question

I'm trying to get devtools working properly for Reactjs profile on my laravel projects. The tools say that my projects aren't in dev mode. My react version is sufficient (v18.2 vs required 16.5 for react profile). Since Vue devtools recognise dev mode but react devtools don't (for both FF and Chrome), I assume it's something at the react level.

My .env has APP_ENV=local and I'm using npm run build --watch. Here's my package.json for a react project.

{
    "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"
    }
}

My vite.config.js is

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),
        },
    };
});

I added the process.env.APP_ENV definition on advice found elsewhere, but it didn't help.

Any other ideas where to look?

Answer 1

As per Vite's documentation for the build command...

Build for production.

If you want to run the build command in a mode other than production, pass the -m / --mode option

npm run build -- --mode development --watch