reactjs - How can I start a REACT application in VS code - Stack Overflow

admin2025-04-18 3

I am trying to run a REACT app in a docker devcontainer in VS Code but it is VERY hard to get it running...

When the application had small number of components (like 12), this worked flawlessly... but I have gradually been adding functionality to the application, and the number of components has grown to over 100. And as the number was growing larger VS code has had a harder and harder time starting it. It will run, but it takes running the start command sometimes 10 or 15 times before it will run.

What I have tried

I have tried Reopen File Locally then open the project in a container, the tried to start - same issue

I have tried Rebuild Container which takes a substantial amount of time, and sometimes this works and sometimes it doesn't.

I have used npm run start and npm start - same issue

I bumped the memory for node up to 8GB NODE_OPTIONS=--max-old-space-size=8192 - no luck

Symptoms

After issuing the start command, this flashes in the terminal window VERY briefly (like so brief, it took me five attempts to get a screen shot)

after the brief web pack notice, this is displayed

Starting the development server...

then VS Code waits maybe 5-10 second, then this appears

The build failed because the process exited too early. 
This probably means the system ran out of memory or 
someone called `kill -9` on the process.

Files

Here is my dev container file contents:

{
  "name": "React Dev Container",
  "dockerFile": "Dockerfile",
  "context": "..",
  "appPort": 3000,
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "mhutchie.git-graph",
        "ms-vscode.js-debug" // Add JS Debugger extension
      ],
      "settings": {
        "files.autoSave": "afterDelay",
        "files.autoSaveDelay": 1000,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 4
      }
    }
  },
  "postCreateCommand": "npm install",
  "remoteUser": "node"
}

Here is my docker file contents

# Use the official Node.js image.
FROM node:18

# Set the working directory.
WORKDIR /app

# Install dependencies.
COPY package*.json ./
RUN npm install

# Copy the rest of the application code.
COPY . .

# Expose the port the app runs on.
EXPOSE 3000

# Start the application.
CMD ["npm", "start"]

Docker image information

Here is my package.json contents:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/user-event": "^13.5.0",
    "@vis.gl/react-google-maps": "^1.4.2",
    "axios": "^1.7.8",
    "bootstrap": "^5.3.3",
    "chroma-js": "^3.1.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.4.0",
    "react-router-dom": "^6.28.0",
    "react-scripts": "5.0.1",
    "react-select": "^5.9.0",
    "sass": "^1.81.0",
    "web-vitals": "^2.1.4"
  },
  "resolutions": {
    "@emotion/react": "11.14.0"
  },
  "scripts": {
    "start": "NODE_OPTIONS=--max-old-space-size=8192 react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "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"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.1.0",
    "@types/chroma-js": "^3.1.0",
    "@types/jest": "^29.5.14",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "react-test-renderer": "^18.0.0",
    "ts-jest": "^29.2.5",
    "typescript": "^4.9.5"
  }
}

Logs

here is a log that I found

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
npm notice
npm notice New major version of npm available! 10.8.2 -> 11.0.0
npm notice Changelog: .0.0
npm notice To update run: npm install -g [email protected]
npm notice
[75109 ms] Start: Run in container: # Test for /home/node/.gitconfig and git
[75114 ms] 
[75114 ms] 
[75114 ms] Start: Run in container: # Copy /Users/michaelliss/.gitconfig to /home/node/.gitconfig
[75117 ms] 
[75117 ms] 
[75117 ms] Start: Run in container: # Cleaning up git config
[75122 ms] 
[75122 ms] 
[75123 ms] Start: Run: git config --global --get gpg.ssh.allowedSignersFile
[75123 ms] Start: Run in container: command -v git >/dev/null 2>&1 && git config --global --replace-all credential.helper '!f() { /home/node/.vscode-server/bin/cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba/node /tmp/vscode-remote-containers-fb21cb92-dbe3-4af3-b382-14be7136693a.js git-credential-helper $*; }; f' || true
[75125 ms] 
[75125 ms] 
[80804 ms] Start: Run in container: cat /proc/552/environ
[98859 ms] Port forwarding connection from 63355 > 33611 > 33611 in the container.
[98865 ms] Start: Run in container: /home/node/.vscode-server/bin/cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba/node -e 
[99116 ms] Port forwarding 63355 > 33611 > 33611 stderr: Connection established
[103822 ms] Port forwarding 63355 > 33611 > 33611: Local close
[103839 ms] Port forwarding 63355 > 33611 > 33611 stderr: Remote stdin close
[103901 ms] Port forwarding 63355 > 33611 > 33611 terminated by extension (closed) with code 0 and signal null.
[229461 ms] [16:56:09] [File Watcher (node.js)] Watcher shutdown because watched path got deleted
[334918 ms] Port forwarding connection from 63528 > 33611 > 33611 in the container.
[334927 ms] Start: Run in container: /home/node/.vscode-server/bin/cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba/node -e 
[335574 ms] Port forwarding 63528 > 33611 > 33611 stderr: Connection established
[338872 ms] Port forwarding 63528 > 33611 > 33611: Local close
[338903 ms] Port forwarding 63528 > 33611 > 33611 stderr: Remote stdin close
[338938 ms] Port forwarding 63528 > 33611 > 33611 terminated by extension (closed) with code 0 and signal null.