CODEWITHSUNDEEP
reactjscreate-react-appvite
Guruleni
Guruleni

Reputation: 556

Vite with create-react-app is returning 404 error

I decided to configure my react application created by create-react-app to start using vite. After following some documentation, I configured the required files. When I run vite in the root of my application, it runs but unfortunately I cannot access the files due to 404 errors. The strange is that for my coworkers it runs. When I change to react-scripts it runs successfully. Below is some configuration of my application:

vite.config.ts

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

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "types": ["vite/client"],
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vite",
    "start:debug": "vite --debug",
    "build:development": "tsc && vite build",
    "build:staging": "tsc && vite build --mode staging",
    "build:production": "tsc && vite build --mode production",
    "preview": "vite preview",
    "eslint": "eslint --ext .tsx,.ts src/",
    "eslint:fix": "eslint --fix --ext .tsx,.ts src/"
  },
  "dependencies": {
    "@azure/msal-browser": "^2.24.0",
    "@azure/msal-react": "^1.4.0",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "react-data-table-component": "^7.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-sliding-side-panel": "^2.0.3",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/cors": "^2.8.12",
    "@types/node": "^16.11.41",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "@typescript-eslint/eslint-plugin": "^5.30.0",
    "@typescript-eslint/parser": "^5.30.0",
    "@vitejs/plugin-react": "^1.3.2",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.18.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.0",
    "typescript": "^4.7.4",
    "vite": "^2.9.13",
    "vite-plugin-svgr": "^2.2.0"
  },
  "engines": {
    "node": ">=16.0.0",
    "npm": ">=8.0.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

After execute npm start, it returns this content in the command line:

vite v2.9.13 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 308ms.

After trying to access the page at that address, I get 404, and nothing is printed into my console.

This localhost page can’t be foundNo webpage was found for the web address: 
http://localhost:3000/

HTTP ERROR 404

I already tryind to use the vite package to create a react application using the CLI, and it worked. I compared the configuration of the project that worked, and this, but I could't find any difference that could change the result.

If I try to access some /public resources, I can. So, the vite is hosting this folder, but the index.html from the root is not being building for some reason I guess.

The structure of my project is avaiable in this image

Do you have some suggestion for what is happaning to my project? Thanks!

EDIT 1

After some tests I discovered that when I run vite build and host the builded folder with serve, it works. The folder structure is generated correctly and the assets too. I think it is something with the live-reload or the vite command itself.

EDIT 2

Using vite preview in the build folder worked as well.

Upvotes: 3

Views: 12332

Answers (1)

Guruleni
Guruleni

Reputation: 556

After trying a lot of tentatives, I decided to create another project using the vite CLI, and adding parts of the problematic project little by little. After make the project create using CLI being equal to the other one, by misterious it keept working. The other project still didn't. So, I decided to clean the dependencies for both project and install again, but I got the same result. So, the unique difference I could see was the NAME OF THE PROJECT.

The problematic project had some spaces in the repo name, and after clone this repo, the name of the folder encoded the spaces to %20 codes. By removind it by hand, the vite started to works perfectly. After changing the name of the project to have the %20 again, the vite didn't work. For me, this looks strange a lot.

Project name: Project%20 index.html route result' status: 404

Project name: Project index.html route result' status: 200

I'm gonna open a ticket in vite project for the mantainers to check about it, and discover if it is a kind of bug or not.

EDIT 1

Issue opened: https://github.com/vitejs/vite/issues/8904

Upvotes: 9

Related Questions