I've followed the directions on the Next blog I ran npm i next@latest as I'm trying to upgrade my project from NextJS v11.1.2 to v12.0.1
My package.json successfully updated to show v12.0.1 - for good measure I also deleted my node_modules folder and my .next folder and re-downloaded all dependencies with npm install to start it cleanly from scratch and it all went smoothly.
Then once I ran npm run dev I then received the error below, similar to some older StackOverflow posts reflecting errors/bugs people were receiving in the past with Next v8 here, v9 here and v10 here... they've notably gone unsolved.
I can however run npm run build with no errors whatsoever. So I cannot get it in development mode for some reason...
I thought I'd just share this bug with people and see if others are also getting the same error. If anyone has any ideas as to how I can fix this, I'd GREATLY appreciate it.
Here is the error I receive when I run npm run dev:
event - compiled successfully in 5.4s (3124 modules)
wait - compiling /...
event - compiled successfully in 1720 ms (3157 modules)
<--- Last few GCs --->
[77219:0x110008000] 56149 ms: Scavenge 4065.3 (4137.2) -> 4064.7 (4138.2) MB, 8.4 / 0.0 ms (average mu = 0.608, current mu = 0.303) allocation failure
[77219:0x110008000] 56159 ms: Scavenge 4066.1 (4138.2) -> 4065.5 (4142.7) MB, 7.4 / 0.0 ms (average mu = 0.608, current mu = 0.303) allocation failure
[77219:0x110008000] 59822 ms: Mark-sweep 4068.6 (4142.7) -> 4065.8 (4144.7) MB, 3653.8 / 0.0 ms (average mu = 0.422, current mu = 0.018) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
1: 0x101366e15 node::Abort() (.cold.1) [/Users/seanmodd/node_modules/node/bin/node]
2: 0x1000be439 node::Abort() [/Users/seanmodd/node_modules/node/bin/node]
3: 0x1000be59f node::OnFatalError(char const*, char const*) [/Users/seanmodd/node_modules/node/bin/node]
4: 0x10022f627 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/seanmodd/node_modules/node/bin/node]
I've reverted to Next v11.1.2 with ease and will just stick with that for now until I think I can make an adjustment to fix this issue... I would love to try out the edge functions, server components and the faster build times with v12 though so I am missing out!!!!!
There is likely some issue related to other dependencies I have in my project which is causing the conflict... below I've included my package.json just in case, there are quite a lot of packages being used.
{
"name": "@minimal/minimal-kit-react",
"author": "minimals.cc",
"version": "2.6.0",
"private": true,
"scripts": {
"dev": "next dev -p 3222",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@apollo/client": "3.4.15",
"@auth0/auth0-spa-js": "1.18",
"@emotion/cache": "^11.4.0",
"@emotion/react": "^11.4.1",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@fontsource/alata": "^4.5.0",
"@fontsource/barlow": "^4.5.0",
"@fontsource/inter": "^4.5.0",
"@fontsource/karla": "^4.5.0",
"@fontsource/poppins": "^4.5.0",
"@fontsource/public-sans": "^4.5.0",
"@fontsource/raleway": "^4.5.0",
"@fullcalendar/daygrid": "^5.9.0",
"@fullcalendar/interaction": "^5.9.0",
"@fullcalendar/list": "^5.9.0",
"@fullcalendar/react": "^5.9.0",
"@fullcalendar/timegrid": "^5.9.0",
"@fullcalendar/timeline": "^5.9.0",
"@hookform/devtools": "^4.0.1",
"@hookform/resolvers": "^2.8.0",
"@iconify/icons-ant-design": "^1.1.0",
"@iconify/icons-eva": "^1.1.0",
"@iconify/icons-ic": "^1.1.10",
"@iconify/icons-simple-icons": "^1.1.46",
"@iconify/react": "^3.0.1",
"@material-ui/core": "^4.11.0",
"@material-ui/data-grid": "^4.0.0-alpha.21",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.56",
"@mui/icons-material": "^5.0.0",
"@mui/lab": "^5.0.0-alpha.47",
"@mui/material": "^5.0.0",
"@mui/styles": "^5.0.0",
"@mui/utils": "^5.0.0",
"@mui/x-data-grid": "^5.0.0-beta.1",
"@react-pdf/renderer": "^2.0.19",
"@reduxjs/toolkit": "^1.6.1",
"@stripe/react-stripe-js": "^1.5.0",
"@stripe/stripe-js": "^1.18.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.0",
"@testing-library/user-event": "^13.2.1",
"@turf/bbox": "^6.5.0",
"amazon-cognito-identity-js": "^5.1.0",
"apexcharts": "^3.28.3",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.21.4",
"axios-mock-adapter": "^1.20.0",
"change-case": "^4.1.2",
"d3-array": "^3.0.2",
"d3-scale": "^4.0.0",
"date-fns": "^2.24.0",
"deck.gl": "^8.5.8",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"emoji-mart": "^3.0.0",
"firebase": "^8.10.0",
"formik": "^2.2.9",
"framer-motion": "^4.1.17",
"highlight.js": "^11.2.0",
"history": "^5.0.1",
"i18next": "^20.6.1",
"i18next-browser-languagedetector": "^6.1.2",
"immutable": "^4.0.0-rc.14",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^3.1.2",
"lazysizes": "^5.3.2",
"lodash": "^4.17.21",
"madge": "^5.0.1",
"mapbox-gl": "^2.4.1",
"next": "^11.1.2",
"notistack": "^1.0.6-next.3",
"nprogress": "^0.2.0",
"numeral": "^2.0.6",
"process": "^0.11.10",
"prop-types": "^15.7.2",
"react": "17.0.2",
"react-apexcharts": "^1.3.9",
"react-beautiful-dnd": "^13.1.0",
"react-copy-to-clipboard": "^5.0.4",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-dropzone": "^11.4.0",
"react-helmet-async": "^1.1.2",
"react-highlight": "^0.14.0",
"react-hook-form": "^7.15.3",
"react-i18next": "^11.12.0",
"react-image-lightbox": "^5.1.4",
"react-infinite-scroll-component": "^6.1.0",
"react-intersection-observer": "^8.32.1",
"react-lottie": "^1.2.3",
"react-map-gl": "^6.1.17",
"react-markdown": "^7.0.1",
"react-quill": "^2.0.0-beta.4",
"react-redux": "^7.2.5",
"react-resize-aware": "^3.1.1",
"react-scripts": "^4.0.1",
"react-scroll": "^1.8.4",
"react-slick": "^0.28.0",
"react-spring": "^9.2.4",
"redux": "^4.1.1",
"redux-persist": "^6.0.0",
"rehype-highlight": "^5.0.0",
"rehype-raw": "^6.1.0",
"simplebar": "^5.3.5",
"simplebar-react": "^2.3.5",
"slick-carousel": "^1.8.1",
"stylis": "^4.0.10",
"stylis-plugin-rtl": "^2.0.2",
"typescript": "^4.3.5",
"uuid": "^8.3.2",
"worker-loader": "^3.0.8",
"yup": "^0.32.9"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/eslint-parser": "^7.15.4",
"@babel/preset-react": "^7.14.5",
"@types/node": "^16.7.13",
"@typescript-eslint/eslint-plugin": "^4.31.0",
"@typescript-eslint/parser": "^4.31.0",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^14.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-wesbos": "2.1.0",
"eslint-plugin-html": "^6.1.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.25.1",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.2",
"typescript": "^4.4.2"
}
}
