Fix frontend Docker dev environment for React 19 compatibility

- Upgrade Node base image from 18-alpine to 20-alpine (npm compatibility)
- Use npm ci instead of npm install for reliable dependency extraction
- Use named volumes for node_modules and .next to avoid anonymous volume issues
- Upgrade React/ReactDOM to ^19.0.0 for Next.js 15.4.6 compatibility
- Change Dockerfile to use --legacy-peer-deps for peer dep conflicts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docker-compose.yml

@@ -75,15 +75,18 @@ services:
       - "18002:3000"  # External:Internal port mapping
     volumes:
       - ./frontend:/app  # Mount entire frontend directory for development
-      - /app/node_modules  # Exclude node_modules from mount
+      - frontend_node_modules:/app/node_modules  # Named volume for node_modules
+      - frontend_next:/app/.next  # Named volume for .next build cache
     depends_on:
       - api
     restart: unless-stopped
-    command: ["sh", "-c", "npm install && npm run dev"]
+    command: ["sh", "-c", "npm ci --legacy-peer-deps && npm run dev"]
 
 volumes:
   postgres_data:
   redis_data:
+  frontend_node_modules:
+  frontend_next:
 
 networks:
   default:

frontend/Dockerfile

@@ -1,7 +1,7 @@
 # Stock Oracle Frontend Dockerfile
 
 # Base image with Node.js
-FROM node:18-alpine AS base
+FROM node:20-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps
@@ -10,7 +10,7 @@ WORKDIR /app
 
 # Copy package files
 COPY package.json package-lock.json* ./
-RUN npm ci --only=production
+RUN npm ci --legacy-peer-deps
 
 # Rebuild the source code only when needed
 FROM base AS builder

frontend/package.json

@@ -18,16 +18,16 @@
     "next": "^15.4.6",
     "plotly.js": "^2.35.3",
     "postcss": "^8.4.31",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.2.4",
     "react-plotly.js": "^2.6.0",
     "react-query": "^3.39.3",
     "tailwindcss": "^3.3.0"
   },
   "devDependencies": {
     "@types/node": "^20.8.0",
-    "@types/react": "^18.2.0",
+    "@types/react": "^19.0.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react-dom": "^19.0.0",
     "eslint": "^8.51.0",
     "eslint-config-next": "^15.0.0",
     "typescript": "^5.2.0"