trying to build docker container with docker compose, running a vite + react + ts app throws an error

Question

I am trying to build a multi-container app using docker compose. However, the container build fails, and I have a feeling that it is connected to the fact that the app is built using typescript and vite. Could someone help me out? :)

this is my dockerfile :

# pull official base image
FROM node:13.12.0-alpine

WORKDIR /plantr_frontend

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent

# add app
COPY . ./

# start app
CMD ["npm", "run", "dev"]

and this is my docker-compose.yml :

version: '3.7'

services:

  sample:
    container_name: sample
    build:
      context: ./plantr_frontend
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - 3001:3000
    environment:
      - CHOKIDAR_USEPOLLING=true

the project structure is:

PLANTR
 - [dir] plantr_frontend (this is my react app, with Dockerfile in root of this folder
 - docker-compose.yml

THE ERROR:

sample  | 
sample  | > plantr_frontend@0.0.0 dev /plantr_frontend
sample  | > vite --host
sample  | 
sample  | (node:18) ExperimentalWarning: The ESM module loader is experimental.
sample  | file:///plantr_frontend/node_modules/vite/bin/vite.js:7
sample  |     await import('source-map-support').then((r) => r.default.install())
sample  |     ^^^^^
sample  | 
sample  | SyntaxError: Unexpected reserved word
sample  |     at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
sample  |     at async link (internal/modules/esm/module_job.js:37:21)
sample  | npm ERR! code ELIFECYCLE
sample  | npm ERR! errno 1
sample  | npm ERR! plantr_frontend@0.0.0 dev: `vite --host`
sample  | npm ERR! Exit status 1
sample  | npm ERR! 
sample  | npm ERR! Failed at the plantr_frontend@0.0.0 dev script.
sample  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
sample  | 
sample  | npm ERR! A complete log of this run can be found in:
sample  | npm ERR!     /root/.npm/_logs/2022-08-30T15_52_15_873Z-debug.log
sample exited with code 1

Answer 1

Do you have a FROM command in your Dockerfile? You probably should build from one of node images to run npm inside container eg

FROM node

# set working directory
WORKDIR /plantr_frontend
...

Answer 2

I was using an outdated version of Node.js, removed the version number to always use the latest image.