Question 73142 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Unable to publish vite react app to gh pages – Reactjs

I’ve tried following documentation on publishing into gh pages and I’ve done it before with a static site. I’m trying to learn how to publish into gh pages using vite + react. The site is https://mattazz.github.io/npc-gen/

I’m able to build and publish successfully but when I open a page, it’s just a white blank page with some errors in the console:

GET https://mattazz.github.io/assets/index-24f5ab68.js net::ERR_ABORTED 404
GET https://mattazz.github.io/assets/index-1a0b6476.css net::ERR_ABORTED 404
mattazz.github.io/:1 Unchecked runtime.lastError: The message port closed before a response was received.

This is what my build folder looks like:
enter image description here

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik+Iso" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NPC Generator</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

package.json

{
  "homepage": "http://mattazz.github.io/npc-gen",
  "name": "vite-project",
  "private": false,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap": "^5.2.3",
    "dotenv": "^16.0.3",
    "jspdf": "^2.5.1",
    "openai": "^3.2.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.2",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.9.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "gh-pages": "^5.0.0",
    "vite": "^4.1.0"
  }
}

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: { chunkSizeWarningLimit: 1600, },
})
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I just had to edit my vite.config.js to include base: './' so that it knows how to get the path of the assets correctly


  2. 0

    Try turning off extensions like AdBlock, Adobe Acrobat, Google Docs Offline, Hover Zoom+, Norton Identity Safe, Norton Safe Web and check.

    check this out for reference: https://github.com/gatsbyjs/gatsby/issues/9899

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search