1

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"
  }
}
Freedisch
  • 124
  • 1
  • 9
  • You’ve not listed your package.json so just checking, is vite listed as a dependency in your package.json dependencies? – Tetarchus Mar 25 '23 at 13:18
  • Yes, it's listed everything is working correctly locally. ``` { "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": { "prettier": "^2.8.4", "typescript": "^4.9.3", "vite": "^4.2.0" } } ``` – Freedisch Mar 25 '23 at 13:21
  • Your `volumes:` block is hiding everything in the image, including the `/usr/src/app/node_modules` directory. Delete that block. – David Maze Mar 25 '23 at 13:26
  • Removing the volumes works but it means that the docker container won't be able to track the changes locally I will have to rebuild a new image each time there are changes – Freedisch Mar 25 '23 at 13:37

1 Answers1

5

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
Radu Lucut
  • 132
  • 2
  • 9
  • This worked for me. I don't understand how there are so many docker-vite tutorials out there but none reference this. node_modules needs its volume apparently? Did this behavior change recently or has it always worked like that? Anyway, I can confirm this works. Thanks – Erick A. Montañez May 15 '23 at 05:57