1

I've been dealing with this error for many hours,I would like to containerize my React application in a docker-compose alongside my nodejs backend, a postgres container and a pgadmin container. I already managed to configure everything besides my React application, since I've been receiving this error after running docker-compose up.

react_frontend |
react_frontend | > @foo/mobile-pwa@0.0.1 start
react_frontend | > cross-env SKIP_PREFLIGHT_CHECK=true craco start
react_frontend |
react_frontend | ℹ ｢wds｣: Project is running at http://172.23.0.5/
react_frontend | ℹ ｢wds｣: webpack output is served from
react_frontend | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
react_frontend | ℹ ｢wds｣: 404s will fallback to /
react_frontend | Starting the development server...
react_frontend |
react_frontend | Failed to compile.
react_frontend |
react_frontend | EACCES: permission denied, open '/usr/src/app/node_modules/.cache/.es
lintcache'

Furthermore, I've been trying out several solutions proposed in SO.

I was wondering, since I'm using a monorepo with Yarn workspaces there was something else I should be doing.

This is my dockerfile for my React App.

FROM node:14-alpine

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY package.json .

# User and Permisions
#USER node
#RUN npm config set unsafe-perm true

# Dependencies
RUN npm install 
RUN npm install cross-env -g
RUN npm install npm install @craco/craco -g

#RUN mkdir -p /app/node_modules/.cache
#RUN chown -R node node_modules/
COPY . .
# start app
CMD ["npm","run","start"]

And this is my docker-file located at the root of my project.

version: "3.7"

services:
  web:
    container_name: react_frontend
    build: ./mobile-pwa
    volumes:
      - ./mobile-pwa:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - 3001:3005
    command: npm run start
    env_file:
      - ./mobile-pwa/.env
    networks:
      - webnet
    depends_on:
      - backend
  backend:
    container_name: nest_backend
    build: ./nest-backend
    volumes:
      - ./nest-backend:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - 3000:${PORT}
    command: npm run start:dev
    env_file:
      - ./nest-backend/.env
    networks:
      - webnet
    depends_on:
      - postgres
  postgres:
    container_name: postgres_database
    image: postgres:12
    networks:
      - webnet
    env_file:
      - ./nest-backend/.env
    environment:
      POSTGRES_PASSWORD: ${RDS_PASSWORD}
      POSTGRES_USER: ${RDS_USERNAME}
      POSTGRES_DB: ${RDS_DB_NAME}
      PG_DATA: /var/lib/postgresql/data
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - 5433:5432
  pg-admin:
    container_name: pg_admin
    image: dpage/pgadmin4
    environment:
      PGADMIN_DEFAULT_PASSWORD: root
      PGADMIN_DEFAULT_EMAIL: dev@foo.com
    volumes:
      - pgadmin:/var/lib/pgadmin
    ports:
      - 7070:80
    networks:
      - webnet
    depends_on:
      - postgres
networks:
  webnet:
volumes:
  pgdata:
  pgadmin:
Jeremy
  • 1,447
  • 20
  • 40
  • Try removing the `node_modules` volume from your container in your docker-compose file. If this fixes the issue I can write up an answer – Codebling Aug 23 '21 at 22:07
  • Hi it seems like another error is thrown, when I remove this volume which is great lol. `react_frontend | (node:32) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tailwindcss' react_frontend | Require stack: react_frontend | - /usr/src/app/craco.config.js react_frontend | - /usr/local/lib/node_modules/@craco/craco/lib/config.js react_frontend | - /usr/local/lib/node_modules/@craco/craco/scripts/start.js` – Jeremy Aug 23 '21 at 22:25
  • 1
    I'll write an answer. You're using the docker container as kind of a nested development environment - tldr don't use the volume mounts for your source code – Codebling Aug 23 '21 at 23:05
  • Wouldn't this allow me to make changes without restarting the container? – Jeremy Aug 23 '21 at 23:09
  • Yes this is the one case in which this is useful. – Codebling Aug 23 '21 at 23:10
  • That's the intended use, is there another way to accomplish this? I managed to set this up in my backend image and in another sample react app – Jeremy Aug 23 '21 at 23:11
  • But this assumes you are not running a development environment OUTSIDE of the container, otherwise you risk running into issues where both environments are fighting for control of your dependencies. Are you running and testing inside the container, outside the container, or both? What is the intended purpose of the docker container here? – Codebling Aug 23 '21 at 23:11
  • I would like to allow peers (as an option) to deploy and develop our application using docker containers, instead of preparing their own development environments and probably messing something up. – Jeremy Aug 23 '21 at 23:17
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/236335/discussion-between-codebling-and-jeremy). – Codebling Aug 23 '21 at 23:25

0 Answers0