OOM, then "Error: Cannot find module '../webpack-runtime.js" while running dev server

[marlier]

Summary

I'm pretty new to Next.js, and have recently started running into an issue while working on an app. This seems to happen about every 1-2 hours.

Application was created using create-next-app, and is using tailwind.

First, something (the renderer?) will run out of memory and crash, giving me this message on the console:

[0] - warn The server is running out of memory, restarting to free up memory.
[0] - wait compiling...
[0] TypeError: fetch failed
[0]     at Object.fetch (node:internal/deps/undici/undici:11413:11)
[0]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[0]     at async invokeRequest (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
[0]     at async invokeRender (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/router-server.js:253:29)
[0]     at async handleRequest (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/router-server.js:446:24)
[0]     at async requestHandler (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/router-server.js:463:13)
[0]     at async Server.<anonymous> (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/start-server.js:117:13) {
[0]   cause: Error: connect ECONNREFUSED ::1:60136
[0]       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
[0]     errno: -61,
[0]     code: 'ECONNREFUSED',
[0]     syscall: 'connect',
[0]     address: '::1',
[0]     port: 60136
[0]   }
[0] }
[0] - wait compiling /_error (client and server)...
[0] - event compiled client and server successfully in 2.2s (2044 modules)
[0] TypeError: fetch failed
[0]     at Object.fetch (node:internal/deps/undici/undici:11413:11)
[0]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[0]     at async invokeRequest (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
[0]     at async invokeRender (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/router-server.js:253:29)
[0]     at async handleRequest (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/router-server.js:446:24)
[0]     at async requestHandler (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/router-server.js:463:13)
[0]     at async Server.<anonymous> (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/start-server.js:117:13) {
[0]   cause: Error: connect ECONNREFUSED ::1:60136
[0]       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
[0]     errno: -61,
[0]     code: 'ECONNREFUSED',
[0]     syscall: 'connect',
[0]     address: '::1',
[0]     port: 60136
[0]   }
[0] }
[0] - info Loaded env from ...

Even after restart, the server does not work correctly and I need to exit the process.

When I restart, requests to the dev server return a 500, with this message on the console:

[0] Error: Cannot find module '../webpack-runtime.js'
[0] Require stack:
[0] - /Users/marlier/dev/cgn/roadmap/.next/server/pages/_document.js
[0] - /Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/require.js
[0] - /Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/next-server.js
[0] - /Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/dev/next-dev-server.js
[0] - /Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/next.js
[0] - /Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/render-server.js
[0] - /Users/marlier/dev/cgn/roadmap/node_modules/next/dist/compiled/jest-worker/processChild.js
[0]     at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
[0]     at /Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/require-hook.js:110:36
[0]     at Module._load (node:internal/modules/cjs/loader:920:27)
[0]     at Module.require (node:internal/modules/cjs/loader:1141:19)
[0]     at require (node:internal/modules/cjs/helpers:110:18)
[0]     at /Users/marlier/dev/cgn/roadmap/.next/server/pages/_document.js:120:27
[0]     at Object.<anonymous> (/Users/marlier/dev/cgn/roadmap/.next/server/pages/_document.js:126:3)
[0]     at Module._compile (node:internal/modules/cjs/loader:1254:14)
[0]     at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
[0]     at Module.load (node:internal/modules/cjs/loader:1117:32)
[0]     at Module._load (node:internal/modules/cjs/loader:958:12)
[0]     at Module.require (node:internal/modules/cjs/loader:1141:19)
[0]     at require (node:internal/modules/cjs/helpers:110:18)
[0]     at requirePage (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/require.js:112:75)
[0]     at /Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/load-components.js:76:65
[0]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[0]     at async Promise.all (index 0)
[0]     at async loadComponentsImpl (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/load-components.js:75:33)
[0]     at async DevServer.findPageComponentsImpl (/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/next-server.js:439:36) {
[0]   code: 'MODULE_NOT_FOUND',
[0]   requireStack: [
[0]     '/Users/marlier/dev/cgn/roadmap/.next/server/pages/_document.js',
[0]     '/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/require.js',
[0]     '/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/next-server.js',
[0]     '/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/dev/next-dev-server.js',
[0]     '/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/next.js',
[0]     '/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/server/lib/render-server.js',
[0]     '/Users/marlier/dev/cgn/roadmap/node_modules/next/dist/compiled/jest-worker/processChild.js'
[0]   ]
[0] }

In order to recover, I have to do rm -rf .next && rm -rf node_modules && npm i. After doing so, the dev server will begin to work again. rm -rf .next is not sufficient, unfortunately.

I'm presuming that this has something to do with webpack configs, but I really don't understand how webpack works/interacts with Next.js well enough to debug.

Additional information

`next info`:

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64
    Binaries:
      Node: 18.15.0
      npm: 9.8.1
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.16
      eslint-config-next: 13.4.8
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A


warn  - Latest canary version not detected, detected: "13.4.16", newest: "13.4.20-canary.5".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

next.config.js:

/** @type {import('next').NextConfig} */

const nextConfig = {
  // Needed for docker build
  // output: 'standalone',
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'web.miniextensions.com',
        port: '',
        pathname: '/api/*',
      },
      {
        protocol: 'https',
        hostname: 'static.wixstatic.com',
      },
    ],
    domains: ['web.miniextensions.com', 'web.miniextensions.com', 'static.wixstatic.com'],
  },
}

module.exports = nextConfig

package.json:

{
  "name": "roadmap",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "concurrently \"npm run dev:web\" \"npm run firebase\"",
    "dev:web": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "firebase": "firebase emulators:start --import=.firebase-export --export-on-exit=.firebase-export",
    "firebase:export": "firebase emulators:export .firebase-export/",
    "populateDB": "ts-node -r dotenv/config src/scripts/populateDB.ts",
    "populatedb": "ts-node -r dotenv/config src/scripts/populateDB.ts",
    "envtest": "ts-node -r dotenv/config src/scripts/envtest.ts",
    "deploy": "npm run deploy:staging",
    "deploy:staging": "firebase deploy -P staging",
    "deploy:production": "firebase deploy -P production"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.16",
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.2.0",
    "@next-auth/firebase-adapter": "^2.0.1",
    "@phosphor-icons/react": "^2.0.10",
    "@tailwindcss/forms": "^0.5.4",
    "@tailwindcss/line-clamp": "^0.4.4",
    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.6",
    "@wix/api-client": "^1.2.8",
    "@wix/data": "^1.0.36",
    "@wix/members": "^1.0.18",
    "airtable": "^0.12.1",
    "autoprefixer": "10.4.14",
    "bcrypt": "^5.1.0",
    "bcrypt-nodejs": "^0.0.3",
    "clsx": "^2.0.0",
    "commander": "^11.0.0",
    "csv-parse": "^5.4.0",
    "date-fns": "^2.30.0",
    "date-fns-tz": "^2.0.0",
    "dotenv": "^16.3.1",
    "eslint-config-next": "13.4.8",
    "firebase": "^9.23.0",
    "firebase-admin": "^11.10.1",
    "firebase-frameworks": "^0.10.5",
    "firebase-functions": "^4.4.1",
    "firebase-tools": "^12.4.8",
    "flowbite": "^1.8.1",
    "flowbite-react": "^0.5.0",
    "framer-motion": "^10.15.0",
    "next": "^13.4.16",
    "next-auth": "^4.22.1",
    "npm": "^9.8.1",
    "postcss": "8.4.25",
    "react": "18.2.0",
    "react-calendar-icon": "^0.10.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.4",
    "sharp": "^0.32.5",
    "tailwindcss": "3.3.2",
    "ts-node": "^10.9.1",
    "tw-elements": "^1.0.0-beta3",
    "typescript": "5.1.6",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@tsconfig/recommended": "^1.0.2",
    "@types/bcrypt": "^5.0.0",
    "@types/node": "^20.4.9",
    "concurrently": "^8.2.0",
    "esbuild": "^0.19.2",
    "eslint": "^8.44.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-jsonc": "^2.9.0",
    "eslint-plugin-no-async-foreach": "^0.1.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.3",
    "prettier": "^2.8.8",
    "prettier-eslint": "^15.0.1",
    "prettier-plugin-tailwindcss": "^0.3.0"
  }
}

### Example

_No response_