Need help with Vite + React, where one is unable to fetch and display content from the public directory. Despite following various troubleshooting steps, the content from the projects home.html is not being displayed in the React component. There are no logs in the console of the browser. Following is a snapshot of the network and console logs fro the browser. One understands it isn’t a good practice to post images here but without it one cannot view the actual result or understand the problem.
Project Setup:
├── @vitejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
vite.config.js: In the main project directory
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
outDir: 'dist',
rollupOptions: {
input: {
main: 'index.html',
admin: 'admin.html',
},
},
},
server: {
open: true,
host: '127.0.0.1', // Set host to 127.0.0.1
historyApiFallback: true, // Ensure SPA fallback
},
base: './', // Set base path
});
publicHome.jsx: In the public/src directory
import React, { useEffect, useState } from 'react';
const PublicHome = () => {
const [content, setContent] = useState('');
useEffect(() => {
// Fetch content from home.html in the public directory
fetch('/home.html')
.then(response => response.text())
.then(data => setContent(data))
.catch(error => console.error('Error fetching home.html content:', error));
}, []);
return (
<div dangerouslySetInnerHTML={{ __html: content }} />
);
};
export default PublicHome;
index.html: In the main project directory and not in the public directory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Entry Point</title>
</head>
<body>
<script>
// Redirect to home.html as the default landing page
if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
window.location.href = 'home.html';
}
</script>
</body>
</html>
Steps taken is as follows..
Verified that home.html and test.html are in the public directory.
Ensured the fetch path in publicHome.jsx is correct.
Checked the browser’s developer console for errors.
Cleared NPM cache and rebuilt the project using the following commands multiple times
npm cache clean --force
rmdir /s /q node_modules
rmdir /s /q dist
npm install
npm run build
npx serve -s dist
Despite following the said steps, the content from home.html is not being displayed in the React component. The network request for the HTML files is successful, but the content is not rendered.
Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thank you!
