reactjs - Error vite: not found after adding Vite to a React project in Docker - Stack Overflow

admin管理员组

文章数量:1314442

I installed Vite in my React project and set up Docker, but when building the container, I get the error: sh: 1: vite: not found. I don’t understand why this is happening, since Vite is installed in the project.

Before adding Vite, my project worked without errors. The package.json file looked like this:

"scripts": {
  "start": "WATCHPACK_POLLING=true react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Steps I took:

1. I installed Vite in the project using the command:

npm install vite

2. I updated the scripts in package.json:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},
"devDependencies": {
  "react-refresh": "^0.16.0",
  "vite": "^6.0.11"
}

3. I created the vite.config.js configuration file:

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

export default defineConfig({
  plugins: [react()]
});

4. I updated the dev.Dockerfile, and now it looks like this:

FROM node:latest

RUN mkdir /app
WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

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

5. In docker-compose-dev.yml, I configured the frontend section:

frontend:
  build:
    context: ./frontend
    dockerfile: dev.Dockerfile
  volumes:
    - .env:/app/.env
    - ./frontend:/app
    - /app/node_modules
  env_file:
    - .env
  depends_on:
    backend:
      condition: service_started

6. When building and starting the container using the command

docker compose -f docker-compose-dev.yml up --build

I get the following error:

sh: 1: vite: not found

Please let me know if you need more code or additional details to help diagnose the issue.

I installed Vite in my React project and set up Docker, but when building the container, I get the error: sh: 1: vite: not found. I don’t understand why this is happening, since Vite is installed in the project.

Before adding Vite, my project worked without errors. The package.json file looked like this:

"scripts": {
  "start": "WATCHPACK_POLLING=true react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Steps I took:

1. I installed Vite in the project using the command:

npm install vite

2. I updated the scripts in package.json:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},
"devDependencies": {
  "react-refresh": "^0.16.0",
  "vite": "^6.0.11"
}

3. I created the vite.config.js configuration file:

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

export default defineConfig({
  plugins: [react()]
});

4. I updated the dev.Dockerfile, and now it looks like this:

FROM node:latest

RUN mkdir /app
WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

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

5. In docker-compose-dev.yml, I configured the frontend section:

frontend:
  build:
    context: ./frontend
    dockerfile: dev.Dockerfile
  volumes:
    - .env:/app/.env
    - ./frontend:/app
    - /app/node_modules
  env_file:
    - .env
  depends_on:
    backend:
      condition: service_started

6. When building and starting the container using the command

docker compose -f docker-compose-dev.yml up --build

I get the following error:

sh: 1: vite: not found

Please let me know if you need more code or additional details to help diagnose the issue.

• reactjs
• docker
• docker-compose
• dockerfile
• vite

Share Improve this question Follow asked Jan 30 at 11:30 SynchroSynchro 1,26944 gold badges2525 silver badges6161 bronze badges 3

• How does your .env file look like? – Triet Doan Commented Jan 30 at 11:37
• Is this a build/dev image? Don't use the Vite dev server for production. – jabaa Commented Jan 30 at 11:44
• This sounds very similar to Docker fails to update node_modules after dependency changes in package.json; does that match your symptom? In particular I'd remove the volumes: block entirely, including both the line that replaces all of /app with host content and the following line that replaces /app/node_modules with an anonymous volume that does not get updated. – David Maze Commented Jan 30 at 14:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Your vite package is listed under devDependencies. Maybe you have set your environment to production (via NODE_ENV), that's why npm install does not install dev packages.

To fix it, you can either:

1. Move vite to dependencies part, like this:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},
"dependencies": {
  "vite": "^6.0.11"
},
"devDependencies": {
  "react-refresh": "^0.16.0"
}

2. or explicitly tell npm to install all packages with the flag --production=false.

FROM node:latest

RUN mkdir /app
WORKDIR /app

COPY package*.json ./

RUN npm install --production=false

COPY . .

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

By setting --production=false, npm will install all packages in your package.json file, no matter what the value of NODE_ENV is.

Finally, make sure that node_modules is not copied in the build process by adding it to the .dockerignore file.

本文标签： reactjsError vite not found after adding Vite to a React project in DockerStack Overflow