1

I'm working on a React-Typescript-Vite project that I want to deploy to Firebase hosting. The app is running fine locally (with npm run dev), but I'm having issues with prod. My app basically has a name of a store as the first url subdirectory then another subdirectory /entry for the homepage. So for example - http://localhost:5173/gucci/entry. The interesting thing is that on prod if I only navigate to https://myprojectname.firebaseapp.com/gucci(the url hosting my app) I do see the background picture, but if I try https://myprojectname.firebaseapp.com/gucci/entry then I get an empty page.

I've tried using the sources and network tabs in chrome dev tools to help me debug, this is what I see in the prod site in the sources tab in the 'entry' document:

<!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>
    <script type="module" crossorigin src="./assets/index-f625c516.js"></script>
    <link rel="stylesheet" href="./assets/index-31f53eb0.css">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>

and this what I see in the same document in my local environment:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

    <script type="module" src="/@vite/client"></script>

    <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>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx?t=1677961443563"></script>
  </body>
</html>

So it seems the issue is with the script tags in prod, but I'm not sure how to handle it.

This is my firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

and this is my vite.config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

I'm using react-router-dom for routing. I'd appreciate anyone's help!

mike_dalfino
  • 31
  • 5
  • Do you use a routing library? – Konrad Mar 05 '23 at 13:19
  • Yes react-router-dom – mike_dalfino Mar 05 '23 at 13:43
  • Does this answer your question? [React production router 404 after deep refresh firebase](https://stackoverflow.com/questions/48826489/react-production-router-404-after-deep-refresh-firebase) – Konrad Mar 05 '23 at 13:46
  • 1
    Unfortunately no ): This is my firebase.json file: ` { "hosting": { "public": "dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } ` – mike_dalfino Mar 05 '23 at 13:50
  • and the package.json: ` { "name": "vite-project", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "lint": "eslint . --ext .ts,.tsx" }, "dependencies": { ... } } ` – mike_dalfino Mar 05 '23 at 14:00
  • 1
    I finally solved it! The issue was that I had: }> but i needed to get rid of the slash in the path value – mike_dalfino Mar 05 '23 at 14:22

0 Answers0