Fix blank page on React build
Stop getting empty black or white previews after deploying built React apps online. Fix assets path referencing instantly.
Quick React Bundle Path Fix
Set thebase configuration property inside vite.config.ts of your React application to ./ to resolve broken asset links.
# Understanding Asset Resolvability
If you load dynamic bundles locally (via file paths) or under non-root domains, standard absolute bundles referencing fails because files point to invalid directories, throwing console errors indicating resource loading failures.
# Step 1: Configure base in vite.config.ts
Open your bundler configuration code and include the relative path base attribute:
``javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
// Force relative paths referencing inside compiled index.html
base: './'
});
`
# Step 2: Validate Output
Run your build command. Inspect generated HTML code blocks. Asset links should change from /assets/index.js to relative structures like ./assets/index.js`.
# Core Development Helpers
Check text boundaries: