[SOLVED] Docker build failed with vite react project

Question

This Content is from Stack Overflow. Question asked by Nguyen Tran Quang

I am trying to dockerize my vite react project and I meet this error at the build phase.

This is my Dockerfile:

FROM node:11 as build

WORKDIR /app

COPY ./package.json /app/

RUN npm install

COPY . /app/

RUN npm install serve@13.0.2 -g

RUN npm run build

FROM nginx:1.16.0-alpine

COPY --from=build /app/.nginx/nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

And when i run docker build, i met this error:

 => ERROR [build 7/7] RUN npm run build                                                                            2.4s 
------                                                                                                                  
 > [build 7/7] RUN npm run build:
#13 2.150 
#13 2.150 > hello-vite@0.0.0 build /app
#13 2.150 > vite build --target=es2020
#13 2.150 
#13 2.294 /app/node_modules/vite/bin/vite.js:2
#13 2.294 import { performance } from 'node:perf_hooks'
#13 2.294        ^
#13 2.294 
#13 2.294 SyntaxError: Unexpected token {
#13 2.294     at Module._compile (internal/modules/cjs/loader.js:760:23)
#13 2.294     at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
#13 2.294     at Module.load (internal/modules/cjs/loader.js:685:32)
#13 2.294     at Function.Module._load (internal/modules/cjs/loader.js:620:12)
#13 2.294     at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
#13 2.294     at internal/main/run_main_module.js:21:11
#13 2.306 npm ERR! code ELIFECYCLE
#13 2.306 npm ERR! errno 1
#13 2.309 npm ERR! hello-vite@0.0.0 build: `vite build --target=es2020`
#13 2.309 npm ERR! Exit status 1
#13 2.310 npm ERR! 
#13 2.310 npm ERR! Failed at the hello-vite@0.0.0 build script.
#13 2.310 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
#13 2.318 
#13 2.318 npm ERR! A complete log of this run can be found in:
#13 2.318 npm ERR!     /root/.npm/_logs/2022-08-27T03_47_02_104Z-debug.log
------
executor failed running [/bin/sh -c npm run build]: exit code: 1

I look for some article about dockerizing react vite project with nginx but they use docker-compose, but the requirement in my project i receive is “not use docker-compose”.

Anyone please help me to solve this problem. Thanks!

Solution

Finally managed to get this working having read and better understood this discussion; https://github.com/vitejs/vite/issues/2671#issuecomment-829535806.

I’m on MacOS but the container is running Linux and the architecture is mismatched when it attempts to use the version of esbuild from my mounted volume. So, I need to rebuild esbuild inside the container. I tried to use the entrypoint script as that thread suggests but that didn’t work for me.

What did work was to change the command in my docker-compose.yml to command: sh -c "npm rebuild esbuild && yarn dev".

It’s now hot reloading like a dream.

Answered by sauntimo
This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of
CC BY-SA 2.5.
CC BY-SA 3.0.
CC BY-SA 4.0.

people found this article helpful. What about you?