Can't start React app with Vite on Heroku: `concurrently: not found`

eclipse 0
Viewed 25

My react app fails to start when running in Heroku. I am using Luke McDonald's startup page located here: https://github.com/lukemcdonald/holly-react

Here is what my package.json scripts section looks like:

"scripts": {
    "build": "npm run build:css && vite build",
    "build:css": "postcss styles/tailwind.css -o src/assets/styles.css",
    "dev": "concurrently \"npm run dev:css\" \"vite\"",
    "dev:css": "postcss styles/tailwind.css -o src/assets/styles.css --watch",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "start": "concurrently \"npm run dev:css\" \"vite\"",
    "deploy": "gh-pages -d dist"
  },

When I push to heroku, the build succeeds. But it to fail to start:

app[web.1]: /tmp/start-497558d9.sh: 1: concurrently: not found
heroku[web.1]: Process exited with status 127
heroku[web.1]: State changed from starting to crashed

I added concurrently to my dependencies, to no avail

"dependencies": {
    "clsx": "^1.1.1",
    "firebase": "^9.9.3",
    "gh-pages": "^4.0.0",
    "postcss-import": "^14.1.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "scrollreveal": "^4.0.9",
    "concurrently": "^7.3.0"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/typography": "^0.5.2",
    "@vitejs/plugin-react": "^1.3.2",
    "autoprefixer": "^10.4.7",
    "concurrently": "^7.3.0",
    "eslint": "^8.16.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0",
    "postcss": "^8.4.14",
    "postcss-cli": "^9.1.0",
    "prettier": "^2.6.2",
    "prettier-plugin-tailwindcss": "^0.1.11",
    "tailwindcss": "^3.0.24",
    "vite": "^2.9.9"
  }
postcss vite heroku reactjs
1 Answers

Don't try to run concurrently \"npm run dev:css\" \"vite\" on Heroku. That command is intended for development environments (such as your local machine).

You are likely trying to serve the production build of your app, which does not require concurrently at all. Just run npm run preview, which runs vite preview, which -- as of Vite 3 -- uses sirv to serve the build output directory.

However, you don't necessarily need to use vite preview. You could use any other HTTP server pointed at the build output directory (e.g., zeit/serve or http-server).

tony190
Related