Vite + React: Unable to fetch and Display HTML Content from Public Directory

[Arahsb]

Body

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
`

<title>Entry Point</title> <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> `

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!

Guidelines

• I have read and understood this category's guidelines before making this post.