Blank screen when deploying netlify app but index html is there

Support
1

PLEASE help us help you by writing a good post!

  • we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app
  • DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
  • Build problems? Link or paste the FULL build log & build settings screenshot

The better the post - the faster the answer.

Site Name : https://master--illstrs.netlify.app/

I’m using vite and react for my application. This is my vite config file:

image
image2560×1390 383 KB

This is my index.html code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
  </head>
  <body>
    <div id="root"></div>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Amatic+SC" />
    <script type="module" src="/src/main.tsx"></script>
    
  </body>
</html>

This is my main.tsx code

const router = createHashRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/Home",
    element: <Home />,
  },
  {
    path: "/category/:gender/:category/:page",
    element: <Category />,
  },
  {
    path: "/product/:item/:color",
    element: <Product />,
  },
  {
    path: "/account/login",
    element: <UserLogin />,
  },
  {
    path: "/account/registration",
    element: <UserRegistration />,
  },
  {
    path: "/account/user-logged-in",
    element: <SignedIn />,
  },
  {
    path: "/account/login-recover",
    element: <PasswordReset />,
  },
  {
    path: "/search/:page",
    element: <SearchResults />
  },
  {
    path:"/user/collection",
    element: <Collection />
  }
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

I also happen to get this error:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.

If someone can help me that would be greatly appreciated

2

Change your publish directory: Build & deploy | Site configuration | illstrs | Netlify to dist and re-deploy.

3

I received this error in the build portion of the deploy

Deploy did not succeed: Deploy directory ‘frontend/dist’ does not exist

My frontend files are in a folder called frontend. My apologies for not specifying earlier

4

Your files are built into build: Deploy details | Deploys | illstrs | Netlify

Change it to frontend/build.

5

After doing that I got this error:

Page Not Found

Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

6

These are the only files in your deploy:

/netlify.toml
/assets/main-506deca7.css
/manifest.json
/assets/main-eeaf5de9.js

Do you have an index.html?

7

I checked the build folder and there seems to be no index.html file but there is one in the root directory of my frontend folder just not the build folder. How would I fix this? I’m still new to this so I apologize

8

I’m not familiar with your code, so I cannot comment. By default Vite generates the output in dist directory, which is not happening in your case. If you build locally, what folder does your generated code gets saved into?