Docker - Module not found: Can't resolve 'react-plotly.js'

Question

This question is specific to my docker configuration. Super new to Docker and hence this problem. I tried all the possible solutions on the internet, but none of them worked.

Closest Question: React.js Docker - Module not found

Dockerization of React App

Below are my docker files

Dockerfile

FROM node:10

WORKDIR /app

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

# install dependencies

COPY package*.json ./
RUN npm install --silent
RUN npm install react-scripts -g --silent

COPY . .

EXPOSE 3000
CMD ["npm", "start"]

My system has node version 10.15.3

docker-compose.yml

version: '3'

services:
  django:
    build: ./api
    command: ["python", "manage.py", "runserver", "0.0.0.0:8000"]
    volumes:
      - ./api:/app
    ports:
      - "8000:8000"
  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
      - /app/node_modules
    ports:
      - "3000:3000"

volumes:
  node-modules:

Folder Structure:

api and frontend both have Dockerfile in it, but it's just the frontend Dockerfile that is causing the issue.

Cache messages

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "moment": "^2.29.1",
    "react": "^17.0.1",
    "react-big-calendar": "^0.28.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

are you sure that is the correct mapping for the node_modules volume in your docker-compose.yml file? it's not colon-separated, though that might be a shorthand notation I am not aware of. — Dan O, Dec 06 '20 at 20:28
It didn't work, so assuming what is in the fille that's correct. — Hemant Metallia, Dec 06 '20 at 20:49
But when I build I do get that `npm install` is using cache, how can I remove cache? — Hemant Metallia, Dec 06 '20 at 20:50
@HemantMetallia, you can prune all the images `docker image prune -a` which will remove all the cache — Vivek Bani, Dec 07 '20 at 23:45
also why are you adding this `volumes: node-modules:`? your node_modules mount is anonymous. — Vivek Bani, Dec 08 '20 at 02:03

score 1 · Accepted Answer · answered Dec 07 '20 at 07:37

I faced the same issue but below steps helped me solve the issue.

While adding a new package to our React project and running it with docker-compose following these steps:

Stop any docker-composeif running, with docker-compose down -v
Now add your npm module in your react application, npm install react-plotly.js (in your case)
docker-compose up -d --build

After looking at your docker file it looks fine to me, so I think it's the way you're installing the package is causing the issue.

Docker - Module not found: Can't resolve 'react-plotly.js'

1 Answers1