Search code examples
reactjsdockernpmdocker-composevite

Why is docker-compose throwing vite not found during the build?

I have a React frontend app built with Vite. I'm getting the following error when I'm running my Docker

[+] Running 1/1
 ⠿ Container client-client-1  Recreated                                                                0.2s
Attaching to client-client-1
client-client-1  |
client-client-1  | > client@0.0.0 dev
client-client-1  | > vite
client-client-1  |
client-client-1  | sh: 1: vite: not found
client-client-1 exited with code 127

Below you can see my Dockerfile:

FROM node

WORKDIR /usr/src/app

COPY ./package.json .

RUN npm i

COPY . .


CMD ["npm", "run", "dev"]

I tried to add a command to install vite during the build of the docker container but it didn't work. You check my docker-compose file below

version: '3.9'

services:
  client:
    build: .
    ports:
      - 5173:5173
    volumes:
      - .:/usr/src/app

Here is my package.json

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "dependencies": {
    "eslint": "^8.36.0",
    "eslint-config-airbnb": "^19.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.54.1",
    "@typescript-eslint/parser": "^5.54.1",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.35.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jsdom": "^21.1.0",
    "prettier": "^2.8.4",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}
Solution

  • Change your docker-compose to mount an anonymous persistent volume to node_modules to prevent your local overriding it source

    This worked for me

    version: '3.9'

services:
  client:
    build: .
    ports:
      - 5173:5173
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules