Remix app does not update on changes

[freds-dev]

Hello there,

my remix app is not updating after changes made to the code. I have no idea why. After npm run dev the app runs fine but is not detecting any changes...
Any ideas why?

package.json:

{
  "name": "blues-stack-template",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "run-s build:*",
    "build:prisma": "prisma generate",
    "build:remix": "remix build",
    "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle --external:fsevents",
    "dev:build": "cross-env NODE_ENV=development npm run build:server -- --watch",
    "dev:css": "cross-env NODE_ENV=development npm run generate:css -- --watch",
    "dev": "remix dev -c 'node --inspect --require ./node_modules/dotenv/config --require ./mocks ./build/server.js'",
    "docker": "docker compose up -d",
    "format": "prettier --write .",
    "generate:css": "postcss styles/**/*.css --base styles --dir app/styles",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "setup": "prisma generate && prisma migrate deploy && prisma db seed",
    "start": "cross-env NODE_ENV=production node ./build/server.js",
    "start:mocks": "cross-env NODE_ENV=production node --require ./mocks --require dotenv/config ./build/server.js",
    "test": "vitest",
    "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"",
    "pretest:e2e:run": "npm run build",
    "test:e2e:run": "cross-env PORT=8811 start-server-and-test start:mocks http://localhost:8811 \"npx cypress run\"",
    "typecheck": "tsc && tsc -p cypress",
    "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run",
    "components": "npx shadcn-ui"
  },
  "prettier": {},
  "eslintIgnore": [
    "/node_modules",
    "/build",
    "/public/build",
    "/postgres-data"
  ],
  "dependencies": {
    "@isaacs/express-prometheus-middleware": "^1.2.1",
    "@prisma/client": "^4.16.2",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-slot": "^1.0.2",
    "@remix-run/css-bundle": "*",
    "@remix-run/express": "*",
    "@remix-run/node": "*",
    "@remix-run/react": "*",
    "@tanstack/react-table": "^8.10.7",
    "@turf/helpers": "^6.5.0",
    "@vercel/postgres": "^0.5.1",
    "bcryptjs": "^2.4.3",
    "chokidar": "^3.5.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "compression": "^1.7.4",
    "cross-env": "^7.0.3",
    "csvtojson": "^2.0.10",
    "express": "^4.18.2",
    "geojson": "^0.5.0",
    "isbot": "^3.7.0",
    "lucide-react": "^0.291.0",
    "maplibre-gl": "^3.5.2",
    "morgan": "^1.10.0",
    "prom-client": "^15.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-map-gl": "^7.1.6",
    "source-map-support": "^0.5.21",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7",
    "tiny-invariant": "^1.3.1"
  },
  "devDependencies": {
    "@faker-js/faker": "^8.2.0",
    "@remix-run/dev": "*",
    "@testing-library/cypress": "^10.0.1",
    "@testing-library/jest-dom": "^6.1.4",
    "@types/bcryptjs": "^2.4.5",
    "@types/compression": "^1.7.4",
    "@types/eslint": "^8.44.6",
    "@types/express": "^4.17.20",
    "@types/morgan": "^1.9.7",
    "@types/node": "^18.18.6",
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "@types/source-map-support": "^0.5.9",
    "@typescript-eslint/eslint-plugin": "^6.8.0",
    "@typescript-eslint/parser": "^6.8.0",
    "@vitejs/plugin-react": "^4.1.0",
    "@vitest/coverage-v8": "^0.34.6",
    "autoprefixer": "^10.4.16",
    "cookie": "^0.5.0",
    "cypress": "^13.3.2",
    "dotenv": "^16.3.1",
    "esbuild": "^0.19.5",
    "eslint": "^8.52.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-cypress": "^2.15.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jest": "^27.4.3",
    "eslint-plugin-jest-dom": "^5.1.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-markdown": "^3.0.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-testing-library": "^6.1.0",
    "happy-dom": "^12.9.1",
    "msw": "^1.3.2",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.31",
    "postcss-cli": "^10.1.0",
    "prettier": "3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.6",
    "prisma": "^4.16.2",
    "start-server-and-test": "^2.0.1",
    "tailwindcss": "^3.3.3",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.2.0",
    "typescript": "^5.2.2",
    "vite": "^4.5.0",
    "vite-tsconfig-paths": "^4.2.1",
    "vitest": "^0.34.6"
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "prisma": {
    "seed": "ts-node -r tsconfig-paths/register prisma/seed.ts"
  }
}

Thanks a lot!

[paulrichan]

Hey @freds-dev, I don't have an answer for you but I think we are facing the exact same issues and I think it has to do with shadcn/ui. I've spent close to a week straight debugging this and hot reload works on a page without any shadcn components. Is it potentially the naming convention that shadcn components use? In Remix's docs about HMR it says the components have to follow a certain naming convention.