inertiajs / inertia-laravel

The Laravel adapter for Inertia.js.
https://inertiajs.com
MIT License
2.1k stars 235 forks source link

New laravel breeze with React getting hydration errors #418 and #423 #655

Closed tvarwig closed 3 months ago

tvarwig commented 3 months ago

Version:

Describe the problem:

After performing a fresh Laravel installation with Breeze, selecting the Inertia.js/React stack with Server-Side Rendering (SSR) results in the following errors only in production. If I change from hydrateRoot to createRoot I get no errors, which is expected. Even If I create a blank page with a <div></div> the errors are still there.

Error: Minified React error 418 Details: Visit React Error Decoder for the full message or use the non-minified development environment for complete error details and additional helpful warnings.

Error: Minified React error 423 Details: Visit React Error Decoder for the full message or use the non-minified development environment for complete error details and additional helpful warnings.

Steps to reproduce:

laravel new app
- Laravel Breeze
- React with Inertia
- Inertia SSR and Typescript

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build && vite build --ssr"
    },
    "devDependencies": {
        "@headlessui/react": "^2.0.0",
        "@inertiajs/react": "^1.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@types/node": "^18.13.0",
        "@types/react": "^18.0.28",
        "@types/react-dom": "^18.0.10",
        "@vitejs/plugin-react": "^4.2.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.31",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "tailwindcss": "^3.2.1",
        "typescript": "^5.0.2",
        "vite": "^5.0"
    }
}

comoposer.json


...
"require": {
        "php": "^8.2",
        "inertiajs/inertia-laravel": "^1.0",
        "laravel/framework": "^11.9",
        "laravel/sanctum": "^4.0",
        "laravel/tinker": "^2.9",
        "tightenco/ziggy": "^2.0"
    },
    "require-dev": {
        "fakerphp/faker": "^1.23",
        "laravel/breeze": "^2.1",
        "laravel/pint": "^1.13",
        "laravel/sail": "^1.26",
        "mockery/mockery": "^1.6",
        "nunomaduro/collision": "^8.0",
        "phpunit/phpunit": "^11.0.1"
    },
...