Cannot destructure property 'components' of 'object null' as it is null

[roofleDev]

Today, my application suddenly stopped working in my local environment after running npm run build and then restarting the server with npm run dev.

I'm getting the following stack trace:

TypeError: Cannot destructure property 'components' of 'object null' as it is null.
    at DevServer.renderToResponseWithComponents (/Users/my-user/github/My-Github-Account/my-repo/node_modules/next/dist/server/base-server.js:705:90)
    at DevServer.renderErrorToResponse (/Users/my-user/github/My-Github-Account/my-repo/node_modules/next/dist/server/base-server.js:1203:35)
    at async DevServer.pipe (/Users/my-user/github/My-Github-Account/my-repo/node_modules/next/dist/server/base-server.js:628:25)
    at async Object.fn (/Users/my-user/github/My-Github-Account/my-repo/node_modules/next/dist/server/base-server.js:504:21)
    at async Router.execute (/Users/my-user/github/My-Github-Account/my-repo/node_modules/next/dist/server/router.js:226:36)
    at async DevServer.run (/Users/my-user/github/My-Github-Account/my-repo/node_modules/next/dist/server/base-server.js:606:29)
    at async DevServer.run (/Users/my-user/github/My-Github-Account/my-repo/node_modules/next/dist/server/dev/next-dev-server.js:450:20)
    at async DevServer.handleRequest (/Users/my-user/github/My-Github-Account/my-repo/node_modules/next/dist/server/base-server.js:321:20)

My project deploys to Vercel, which is building correctly and the application is running in the cloud.

Things I have tried without luck:

• Restarting my macbook
• Cloning a fresh copy of the repo and running npm i && npm run dev
• rm -rf ./node_modules && npm i && npm run dev
• Checking out an older commit which should work
• Downgrading NextJs a couple different minor versions
• Running a different version of node with nvm

I have no idea what's happened here. But I can't get past this error now.

Use node v16.14.2, npm 8.5.0.

package.json

{
  "name": "with-typescript",
  "version": "1.0.0",
  "scripts": {
    "dev": "next -p 4200",
    "build": "next build",
    "start": "next start -p 4200",
    "type-check": "tsc",
    "lint": "next lint"
  },
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@hubspot/api-client": "^7.0.0",
    "@mapbox/mapbox-gl-draw": "^1.3.0",
    "@mapbox/mapbox-gl-geocoder": "^5.0.1",
    "@react-pdf/renderer": "^1.6.16",
    "@supabase/supabase-js": "^1.35.3",
    "@turf/turf": "^6.5.0",
    "antd": "^4.21.0",
    "axios": "^0.27.2",
    "csvtojson": "^2.0.10",
    "file-saver": "^2.0.5",
    "firebase": "^8.8.1",
    "firebaseui": "^4.8.1",
    "form-data": "^4.0.0",
    "jszip": "^3.10.0",
    "mapbox-gl": "^2.8.2",
    "moment": "^2.29.3",
    "nanoid": "^4.0.0",
    "next": "^12.1.6",
    "next-connect": "^0.12.2",
    "next-iron-session": "^4.1.12",
    "parse-address": "^1.1.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-highlight-words": "^0.18.0",
    "react-image-gallery": "^1.2.8",
    "react-json-pretty": "^2.2.0",
    "react-json-view": "^1.21",
    "react-redux": "^8.0.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.4.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/firebase": "^3.2.1",
    "@types/mapbox-gl": "^2.7.3",
    "@types/moment": "^2.13.0",
    "@types/react-highlight-words": "^0.16.4",
    "@types/react-redux": "^7.1.24",
    "@types/redux-logger": "^3.0.9",
    "@types/file-saver": "^2.0.5",
    "@types/mapbox__mapbox-gl-geocoder": "^4.7.2",
    "@types/node": "^17.0.41",
    "@types/react": "^18.0.12",
    "@types/react-dom": "^18.0.5",
    "@types/react-image-gallery": "^1.0.5",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "eslint": "^7.29.0",
    "eslint-config-next": "^11.0.0",
    "typescript": "^4.7"
  },
  "license": "MIT"
}

[roofleDev]

I got this figured out. I was accessing an environment variable in _app.tsx. If the variable was not found, it was calling throw "!apiKey".

Unfortunately the usage of just throw resulted in _app.tsx swallowing the error and reporting the destructuring error instead. Amazingly, if I change it to throw new Error("!apiKey") it's extremely easy to debug. Oy vey.

Additionally my other environments were correctly configured, adding to the mystery. Also my localhost seems to have ran for many weeks before this was triggered, also adding to the mystery.

[abeltony-prog]

I had the same error and I solved it by closing my terminal and stopping the yarn run dev and starting it again it worked.

[kylekirkby]

Happened to me when running a build and the dev server at the same time.

[riya-microlent]

I had the same error and I solved it by closing my terminal and stopping the npm run dev and starting it again it worked.