Nguyên nhân: Tại sao 'process' bị lỗi trong ViteChuyển từ Create React App (CRA) sang Vite thường mang lại cảm giác như chuyển từ tàu chở hàng sang siêu tốc hạm. Tuy nhiên, nếu bạn cố gắng truy cập các biến môi trường theo cách cũ, ứng dụng của bạn khả năng cao sẽ bị crash ngay trước khi kịp tải.
// ❌ Dòng này sẽ gây lỗi trong Vite
const apiKey = process.env.VITE_API_KEY;
Trong console của trình duyệt, bạn sẽ thấy lỗi dừng chương trình:
Uncaught ReferenceError: process is not defined
Điều này xảy ra vì process là một biến toàn cục của Node.js, không phải của trình duyệt. Webpack (mà CRA sử dụng) tự động thêm các 'polyfills'—đoạn mã bổ sung mô phỏng môi trường Node.js trong trình duyệt. Vite giữ cho mình gọn nhẹ bằng cách loại bỏ các shim này. Điều này giúp thời gian khởi động dev server dưới 300ms, nhưng có nghĩa là bạn phải sử dụng các tiêu chuẩn web hiện đại thay vì các biến toàn cục đặc thù của Node.
Gỡ lỗi nhanh trong 2 phútTrước khi thay đổi cấu hình, hãy xác định chính xác nơi phát sinh lỗi. Hãy tự hỏi:
- Lỗi do code của tôi? Kiểm tra
process.envtrong các component.- Lỗi do thư viện? Kiểm tra xem có package NPM cũ nào đang yêu cầu môi trường giống Webpack hay không.Vite thay thếprocess.envbằngimport.meta.env. Nếu code của bạn là nguyên nhân, cách khắc phục đơn giản là tìm và thay thế. Nếu một thư viện bên thứ ba gây crash, bạn sẽ cần cấu hình shim.
Giải pháp 1: Sử dụng cú pháp mặc định của Vite (Tốt nhất)Vite sử dụng cú pháp ES Modules (ESM). Đây là tiêu chuẩn cho JavaScript hiện đại và là cách hiệu quả nhất để xử lý các biến.
Bước 1: Tiền tố VITE_Các biến của bạn trong file .env phải bắt đầu bằng VITE_. Nếu không, Vite sẽ bỏ qua chúng để ngăn chặn việc vô tình làm rò rỉ các khóa hệ thống nhạy cảm (như tên người dùng máy tính) vào bundle trình duyệt công khai.
# .env
VITE_API_URL=https://api.example.com
VITE_STRIPE_KEY=pk_test_12345
Bước 2: Cập nhật code của bạnThay thế cú pháp Webpack cũ bằng cú pháp ESM tương đương. Đây là sự thay thế trực tiếp.
// ❌ Cách cũ (CRA/Webpack)
const url = process.env.VITE_API_URL;
// ✅ Cách mới (Vite)
const url = import.meta.env.VITE_API_URL;
Giải pháp 2: Khắc phục lỗi crash của các thư viện cũĐôi khi không phải bạn là người gọi process.env—mà là các thư viện phụ thuộc của bạn. Nếu bạn đang sử dụng một package cũ chưa được cập nhật từ trước năm 2020, nó có thể vẫn dựa vào các polyfill tự động của Webpack. Bạn có thể sửa lỗi này trong vite.config.js bằng cách sử dụng thuộc tính define.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
define: {
// Tạo một đối tượng 'process.env' toàn cục để các thư viện không bị crash
'process.env': {}
}
});
Bản 'shim' này đảm bảo rằng khi một thư viện tìm kiếm process.env, nó sẽ thấy một đối tượng trống thay vì một tham chiếu null. Đây là một giải pháp tình thế nhanh chóng giúp ứng dụng của bạn hoạt động mà không cần đại tu toàn bộ mã nguồn.
Giải pháp 3: TypeScript IntelliSenseDòng import.meta.env có bị gạch chân đỏ không? TypeScript cần biết về các kiểu (type) đặc biệt của Vite. Hãy tạo hoặc cập nhật file src/vite-env.d.ts để sửa các cảnh báo của IDE:
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
Xác minh kết quảKhởi động lại dev server (npm run dev). Đừng chỉ nhìn bằng mắt; hãy kiểm tra console. Thêm một log tạm thời vào App.tsx của bạn:
console.log('Mục tiêu API:', import.meta.env.VITE_API_URL);
console.log('Chế độ hiện tại:', import.meta.env.MODE);
Nếu các giá trị xuất hiện và lỗi ReferenceError biến mất, bạn đã chuyển đổi thành công sang cách xử lý môi trường mặc định của Vite.