Why do I get the error "[Error: std::bad_alloc]" when starting my React application?

Question

I created a fresh Vagrant + VirtualBox debian/buster64 virtual machine (2GB, 2 cores) for a small React webapp project.

Provisioning and installing dependencies with yarn works fine, but when starting the client side of the application via yarn start:client (script shorthand for parcel index.html --port 3000), I receive the following error:

[Error: std::bad_alloc]

Creating a fresh VM and adjusting the memory and core usage has not resolved the problem. VirtualBox shows no indication of an issue and memory usage inside the box is very low. Watching memory fluctuations via free -c 10 during attempted app startup shows memory being allocated before suddenly dropping off when the error is thrown.

No additional error details are provided.

Package.json:

{
  "name": "",
  "version": "0.1.0",
  "description": "",
  "scripts": {
    "start": "node server/server.js",
    "start:client": "parcel index.html --port 3000",
    "start:server": "nodemon ./server/server --watch server/ --port 3001",
    "build": "parcel build index.html"
  },
  "license": "MIT",
  "engine": "14.15.3",
  "dependencies": {
    "axios": "^0.21.1",
    "axios-retry": "^3.1.9",
    "cache-all": "^2.1.1",
    "cors": "^2.8.5",
    "dayjs": "^1.10.1",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "gps-distance": "^0.0.4",
    "less": "^4.1.1",
    "lodash": "^4.17.20",
    "milligram": "^1.4.1",
    "nodemon": "^2.0.6",
    "ramda": "^0.27.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-ga": "^3.3.0",
    "react-modal": "^3.12.1",
    "react-spinners": "^0.10.4",
    "rsuite-table": "^3.14.2"
  },
  "devDependencies": {
    "@parcel/transformer-css": "^2.0.0-alpha.3",
    "@parcel/transformer-postcss": "^2.0.0-alpha.3",
    "babel-preset-nano-react-app": "^0.1.0",
    "parcel": "next",
    "sass": "^1.32.4"
  },
  "babel": {
    "presets": [
      "nano-react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
      [
        "@babel/plugin-transform-react-jsx",
        {
          "pragmaFrag": "React.Fragment"
        }
      ]
    ]
  }
}

Answer 1

After quite a bit of trial and error, I tracked the issue down to the Parcel package's caching.

First, I tried starting the server (API) portion of the application on its own (yarn start:server), which started without issue.

Second, I tried starting the client side of the application without specifying a port number (node_modules/parcel/lib/bin.js index.html). The app started correctly and without issue.

Third, I started the client side normally again (yarn start:client) and the bad_alloc error reappeared.

Fourth, I started the client side with the --no-cache flag. No error.

Finally (TL;DR), I deleted the cache directory (rm -fr .parcel-cache), then restarted the client side as normal. The app built correctly and without error.

So far, I've restarted the client multiple times without issue. It's unclear what in particular about Parcel's caching was causing this problem. Hopefully this saves someone a table flip.