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

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"
]
}
}

Answer 1

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.