inertiajs / inertia-laravel

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

Default breeze ssr + inertia + react + typescript build has 418 and 423 hydrating errors #657

Open maztch opened 2 months ago

maztch commented 2 months ago

I found 418 and 423 hydrating errors on my site build so I tested it on a fresh install in order to start adding components and find the issue. But i found the same issue on the default install.

How to reproduce:

Environment:

Create new project (select react, inertia, typescript, ssr):

composer create-project laravel/laravel example-app
cd example-app
php artisan migrate
composer require laravel/breeze --dev
php artisan breeze:install
php artisan migrate
npm install
npm run build
php artisan serve

Open the web page on chrome and you will see the console errors.

maztch commented 2 months ago

Note: the same process without selecting typescript, has no issues.

maztch commented 2 months ago

This is the default package.json file after the install:

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