reactjs - Vite Build + React 18 - Màn hình trắng (console logs trống)

Tôi đang làm việc trên một ứng dụng Vite/React. Có một quy trình CI đang chạy các lệnh sau và đẩy gói dist lên một bucket S3.

vite build --mode production

Gần đây tôi nhận thấy một commit tôi thực hiện đã khiến ứng dụng bị "trắng màn hình". React không hiển thị component "App" (ví dụ trong main.tsx):

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
    <React.Suspense fallback={<></>}>
        <React.StrictMode>
            <ProSidebarProvider>
                <BrowserRouter>
                    <App/>
                </BrowserRouter>
                ...

Khi nhìn vào trang trắng, mở bảng ghi nhật ký console và tôi không thấy bất kỳ dấu vết ngăn xếp nào. Công cụ phát triển React rõ ràng thấy React đang chạy với bản build sản xuất. Tôi đã thử thêm các ranh giới lỗi nhưng không thành công. Tôi không chắc cách nào để gỡ lỗi xem lỗi nào đang khiến component không render.

Tôi có thể tái hiện điều này cục bộ. Nếu tôi chạy lệnh build ở trên và sau đó là lệnh sau:

vite preview

Tôi có thể thấy trang trắng trên localhost:4173. Điều lạ là nếu tôi chạy lệnh sau:

vite dev

Tôi có thể chạy ứng dụng một cách hoàn hảo trên localhost:5173.

Các phụ thuộc từ package.json

{
"react": "^18.2.0",
"vite": "^4.0.3",
"@vitejs/plugin-react": "^3.0.0",
}

Cấu hình Vite của tôi:

import {defineConfig} from "vite";
import react from '@vitejs/plugin-react'

export default ({mode}) => {
    return defineConfig({
        plugins: [
            react(),
        ],
        base: './',
        build: {
            target: 'esnext',
        },
    });
};

Nếu trong đoạn mã trên (từ main.tsx) tôi thay thế

 <App />

với

  <h1>it works</h1>

Điều này hiển thị hoàn toàn tốt trên các cổng 4173 và 5173. Vấn đề là đang cố gắng tìm thông tin chẩn đoán về lý do tại sao thành phần App không được hiển thị.

Câu trả lời #1

Vấn đề được gây ra bởi tôi sử dụng gói react-lazy-with-preload không đúng cách.

Nếu trong một thành phần tôi tải lười biếng sau:

const Searchbar = lazy(() => import("../../components/Searchbar/Searchbar"));

Và sau đó tôi làm điều này:

await Searchbar.preload();

Điều này dẫn đến trang trắng khi xây dựng Vite. Cách sử dụng đúng:

Searchbar.preload();

Câu trả lời #2

Nếu có bất kỳ lỗi nào trên bảng điều khiển, chẳng hạn như bất kỳ phụ thuộc nào không được định nghĩa,

Thử cái này:

Thêm :

import vue from '@vitejs/plugin-vue'

    plugins: [react(), viteTsconfigPaths(), svgrPlugin(), vue()],
    resolve: {
        alias: {
            process: "process/browser",
            stream: "stream-browserify",
            zlib: "browserify-zlib",
            util: 'util',
            '@': path.resolve(__dirname, "./src")
        },
    },

Điều này trong tệp vite.config.ts và cài đặt tất cả các phụ thuộc được hiển thị trong thông báo lỗi đó. Ví dụ nếu blob-stream hiển thị lỗi, hãy thêm cái này vào alias trong vite.config.ts và cài đặt blob-stream

blobStream: "blob-stream",