production error
I have developed many apps in metronic react tailwind v 9.1. with node 20. everything works fines in dev mode, even in express server (serve -s) local work. It connect perfect with google auth and cloud VM instances. builds are made whiteout errors but the final dist index.html with required assets serve a blank page. (in dev console have no error, APIs are launching correct but the final product is displaying a blank page even if the files are full of codes. Is like not willing to render the app).
Even tried electronic build:
*/Firebase app initialized
VM5:36 DOM fully loaded
index.js:2825 NOTE: The app use data storage.
index.js:2825 Google Maps API preloaded successfully
VM16:2 Visible app/*
I kept demo1 files and added other custom pages in app. I use original vite, package.json config.
Is there a build command to resolve these issues?
Replies (1)
Hi Dinco Daniel
The most common cause of blank pages with no errors is an incorrect base path. In your vite.config.js, add:
export default defineConfig({
base: "./", // Use relative paths instead of absolute
// other config...
})Make sure all asset imports use the correct path format:
// Instead of
import logo from "/src/assets/logo.png"
// Use
import logo from "../assets/logo.png"
// or
import logo from "@/assets/logo.png" // if you have path aliasesMetronic components often need proper initialization. Ensure you're waiting for the DOM to be fully loaded:
import { useEffect } from "react";
import { KTComponents } from "@/metronic/js/components";
function App() {
useEffect(() => {
// Initialize Metronic components after DOM is fully loaded
setTimeout(() => {
KTComponents.init();
}, 0);
}, []);
// Your component code
}If you can provide more details about your specific setup or share error logs from running the build, we can help you to check it.
Thanks
