Laravel 12 treo không truy cập được sau khi nâng cấp Laravel 12.

Mô tả Laravel sau khi nâng cấp lên 12, bật npm run dev hoặc npm start lên là trình duyệt load mãi không xong, tắt đi thì mới vào được), thì console trong trình duyệt (F12 → tab Console) hoặc terminal thường báo một trong các lỗi sau — tuỳ nguyên nhân gốc:

🧩 1. Lỗi WebSocket / HMR không kết nối được

⚠️ Đây là lỗi phổ biến nhất

Trên trình duyệt (F12 → Console) sẽ thấy:


[vite] connecting...
WebSocket connection to 'ws://localhost:5173/' failed
client.ts:1 Error: [vite] failed to connect to websocket.

hoặc:


WebSocket connection to 'wss://localhost:5173' failed: 
Error in connection establishment: net::ERR_CONNECTION_REFUSED

Nguyên nhân:
Laravel 12 không tìm thấy đúng VITE_DEV_SERVER_URL, nên file JS của bạn đang cố kết nối tới host sai (localhost vs 127.0.0.1, hoặc http vs https).

⚙️ 2. Lỗi “Mixed Content” khi Laravel chạy HTTPS, Vite chạy HTTP

Nếu Laravel đang chạy HTTPS (https://127.0.0.1:8000) mà Vite vẫn là HTTP:


Mixed Content: The page at 'https://127.0.0.1:8000/' was loaded over HTTPS,
but requested an insecure resource 'http://127.0.0.1:5173/@vite/client'.
This request has been blocked; the content must be served over HTTPS.

Nguyên nhân:
Trình duyệt chặn vì bạn đang tải JS từ nguồn “không an toàn”.

💣 3. Lỗi “Uncaught SyntaxError: Unexpected token <”

Khi HMR script không được inject, Laravel trả về HTML thay vì JS:


Uncaught SyntaxError: Unexpected token '<'

Nguyên nhân:
Laravel không inject đúng link <script type="module" src="http://127.0.0.1:5173/@vite/client">,
vì VITE_DEV_SERVER_URL không khớp, hoặc Vite dev server chưa chạy.

⚡ 4. Terminal lỗi (npm run dev)

Trên terminal (nơi bạn chạy npm run dev), có thể thấy:


[vite] server started at http://localhost:5173

Nhưng nếu bạn truy cập Laravel ở 127.0.0.1:8000,
HMR sẽ lỗi vì host mismatch (localhost ≠ 127.0.0.1).

👉 Tóm tắt nhanh

Lỗi hiển thị	Nguyên nhân
`WebSocket connection failed`	HMR không kết nối (host hoặc port sai)
`Mixed Content`	Laravel HTTPS nhưng Vite HTTP
`Unexpected token '<'`	Laravel không inject đúng link Vite
Trang load mãi / trống trắng	Vite chưa khởi động hoặc config sai URL

Thì nếu bạn cũng từ Laravel phiên bản cũ upgrade lên Laravel 12 có dùng Vite để build Front-end thì có 1 cách fix nhanh để xem được kết quả:

Vấn đề này không phải do Vite config của bạn sai, mà là do cách Laravel 12 tích hợp Vite (qua laravel-vite-plugin) đã thay đổi.

Giải thích chi tiết:

⚙️ 1. Laravel 12 đổi cơ chế Vite HMR

Từ Laravel 12, laravel-vite-plugin được nâng cấp để:

Bắt buộc dùng HTTPS HMR (qua https://localhost:5173) nếu dự án có SSL.
Và quan trọng hơn: Laravel không còn inject script HMR nếu VITE_DEV_SERVER_URL sai.

Trước đây Laravel 10 chỉ cần Vite chạy ở localhost:5173 là auto detect được.
Nhưng Laravel 12 yêu cầu Laravel và Vite cùng host (và protocol) — nếu không, trình duyệt sẽ “treo loading” mãi (do HMR websocket bị block hoặc CORS lỗi).

💥 2. Khi nào lỗi “treo loading” xảy ra

Thường là một trong các tình huống sau:

Nguyên nhân	Triệu chứng
`VITE_DEV_SERVER_URL` trống hoặc sai host	Trình duyệt treo khi load JS
`vite.config.ts` dùng `localhost` nhưng Laravel chạy ở `127.0.0.1`	HMR không bắt được
Laravel chạy HTTPS nhưng Vite không	Console báo `Mixed content` hoặc `WebSocket error`
Port bị trùng (5173)	Không thể kết nối dev server

✅ 3. Cách khắc phục chuẩn cho Laravel 12

Cập nhật 3 file như sau:

.env


APP_URL=http://127.0.0.1:8000
VITE_DEV_SERVER_URL=http://127.0.0.1:5173

vite.config.ts


export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/index.jsx'],
      refresh: true,
    }),
    react(),
    svgrPlugin(),
    splitVendorChunkPlugin(),
  ],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'resources/js'),
    },
  },
  server: {
    host: '127.0.0.1',
    port: 5173,
    strictPort: true, // tránh random port
    hmr: {
      host: '127.0.0.1',
    },
  },
  build: {
    chunkSizeWarningLimit: 2000,
    sourcemap: true,
  },
})

Và chạy lại:


php artisan serve
npm run dev

👉 Tóm lại:
Sau khi nâng cấp lên Laravel 12, bạn bắt buộc cấu hình VITE_DEV_SERVER_URL khớp hoàn toàn với host + protocol của Vite, nếu không thì Laravel sẽ không inject script HMR — dẫn đến trình duyệt “load mãi không xong”.