how to resolve Error: Cannot find module 'react-dev-utils/chalk' when running on kubernetes?

Question

Please dont mark this as duplicate.I know I have asked this question before but my issue is not getting resolved.

I have already tried adding RUN npm install --save-dev react-dev-utils to the dockerfile before building the image but it doesn't solve the issue.

logs of the pod

> wootz@0.1.0 start /usr/src/app
> node scripts/start.js

internal/modules/cjs/loader.js:626
    throw err;
    ^

Error: Cannot find module 'react-dev-utils/chalk'
Require stack:
- /usr/src/app/scripts/start.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
    at Function.Module._load (internal/modules/cjs/loader.js:527:27)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/usr/src/app/scripts/start.js:19:15)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:837:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/usr/src/app/scripts/start.js' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wootz@0.1.0 start: `node scripts/start.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wootz@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional log                                                                                                                                                             ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-06-17T15_56_02_649Z-debug.log

uipersistantvolume

kind: PersistentVolume
apiVersion: v1
metadata:
  name: ui-initdb-pv-volume
  labels:
    type: local
    app: ui
spec:
  storageClassName: manual
  capacity:
    storage: 1Mi
  accessModes:
    - ReadOnlyMany
  hostPath:
    path: "/home/vignesh/pagedesigneryamls/client"
---
kind: PersistentVolumeClaim
apiVersion: v1
metadata:
  name: ui-initdb-pv-claim-one
  labels:
    app: ui
spec:
  storageClassName: manual
  accessModes:
    - ReadOnlyMany
  resources:
    requests:
      storage: 1Mi

uipersistantvolumetwo

kind: PersistentVolume
apiVersion: v1
metadata:
  name: ui-initdb-pv-volume-two
  labels:
    type: local
    app: ui
spec:
  storageClassName: manual
  capacity:
    storage: 1Mi
  accessModes:
    - ReadOnlyMany
  hostPath:
    path: "/home/vignesh/pagedesigneryamls/client"
---
kind: PersistentVolumeClaim
apiVersion: v1
metadata:
  name: ui-initdb-pv-claim-two
  labels:
    app: ui
spec:
  storageClassName: manual
  accessModes:
    - ReadOnlyMany
  resources:
    requests:
      storage: 1Mi

ui.yaml

apiVersion: v1
kind: Service
metadata:
  name: ui
  labels:
    app: ui
spec:

  ports:
  - name: myport
    port: 80
    targetPort: 3000

  selector:
    app: ui
    tier: frontend

---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: ui
  labels:
    app: ui
spec:
  selector:
    matchLabels:
      app: ui
      tier: frontend
  strategy:
    type: Recreate
  template:
    metadata:
      labels:
        app: ui
        tier: frontend
    spec:

      containers:
      - image: suji165475/devops-sample:updatedclientdockerfile
        name: ui
        ports:
        - containerPort: 80
          name: myport
        volumeMounts:
        - name: ui-persistent-storage-one
          mountPath: /usr/src/app
        - name: ui-persistent-storage-two
          mountPath: /usr/src/app/node_modules
      volumes:
      - name: ui-persistent-storage-one
        persistentVolumeClaim:
          claimName: ui-initdb-pv-claim-one
      - name: ui-persistent-storage-two
        persistentVolumeClaim:
          claimName: ui-initdb-pv-claim-two

the image used in the ui yaml was built using the following dockerfile

FROM node:12.4.0-alpine
RUN mkdir -p usr/src/app
WORKDIR /usr/src/app
COPY package.json package.json
RUN npm install && npm cache clean --force
RUN npm install -g webpack-cli
RUN npm install --save-dev react-dev-utils
WORKDIR /usr/src/app
COPY . .
WORKDIR /usr/src/app
EXPOSE 3000
RUN npm run build
CMD [ "npm","start" ]

docker-compose.yaml

version: "3"

services:
  pg_db:
    image: postgres
    networks: 
      - wootzinternal
    ports:
      - 5432
    environment:
      - POSTGRES_PASSWORD=password
      - POSTGRES_USER=postgres
      - POSTGRES_DB=wootz
    volumes:
      - wootz-db:/var/lib/postgresql/data
  apiserver:
    image: wootz-backend
    volumes:
      - ./api:/usr/src/app
      - /usr/src/app/node_modules
    build:
      context: ./api
      dockerfile: Dockerfile
    networks: 
      - wootzinternal
    depends_on:
      - pg_db
    ports:
      -  '8000:8000'
  ui:
    image: wootz-frontend
    volumes:
      - ./client:/usr/src/app
      - /usr/src/app/build
      - /usr/src/app/node_modules
    build:
      context: ./client
      dockerfile: Dockerfile
    networks:
      - wootzinternal
    ports:
      - '80:3000'

volumes:
  wootz-db:

networks:
  wootzinternal:
    driver: bridge

how can i solve the error Cannot find module 'react-dev-utils/chalk'?? Is there anything missing from the dockerfile?? or is there anything i should remove??

NOTE:the ui app works perfectly when run directly as container using the docker run command or when using docker-compose but when run on kubernetes it shows this error.please help

Answer 1

Don't mount your volumes in the same place where container's files are.

Yes, it may work with docker. Yes it may work with docker-compose.

But you have to aware that kubernetes handles volumes differently than docker/docker-compose

K8s mounts volumes in a way that is similar to bind mount in docker . This means for example that k8s volumes are not pre-populated with the container's content located under the path where the volume is mounted. If you mount a volume under /usr/src/app , every file that was placed there, is now gone (or rather hidden due to bind mount) and can't be accessed easly.

So what can you do in such case? Rethink your application design and most important: don't mount your volumes in places where you hold files (like modules files in this case). When mounting volumes, pick a path that does not exist in container, or exists and is empty.