prismic-react icon indicating copy to clipboard operation
prismic-react copied to clipboard

NextJS 13 JavaScript heap out of memory using SliceZone

Open amendezm opened this issue 2 years ago • 2 comments

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

I started a little project using nextjs 13 and prismic, I´m getting this error every time I navigate to pages using the <SliceZone/> component. Only have 3 slices created, all marked as client components.

Versions

  • @prismicio/react: v2.7.1
  • react: v18.2.0
  • node: v18.12.0

Local Environment

  • windows 10 22h2
  • 8gb ram

Below is my package.json

{
  "name": "nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.15",
    "@prismicio/client": "7.1.0",
    "@prismicio/next": "1.3.2",
    "@prismicio/react": "2.7.1",
    "classnames": "2.3.2",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.6",
    "framer-motion": "^10.12.18",
    "next": "13.4.8",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "4.10.1"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.1",
    "@types/node": "20.3.1",
    "@types/react": "18.2.14",
    "autoprefixer": "10.4.14",
    "eslint": "8.33.0",
    "eslint-config-next": "13.1.6",
    "eslint-config-prettier": "8.6.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "postcss": "8.4.24",
    "slice-machine-ui": "^1.4.0",
    "tailwindcss": "3.3.2"
  }
}

image

image

I would really appreciate your help

amendezm avatar Jul 05 '23 15:07 amendezm

Approximately how many items do you have in those slice zones in your Prismic repository?

s-hirvonen avatar Jul 14 '23 07:07 s-hirvonen

@amendezm <SliceZone> is primarily a wrapper around slices.map(), so it is unlikely to be the cause of a "out of memory" error. The components, however, could contribute to memory usage.

Could you try the following?

  • Comment out all properties in the components object in slices/index.js.
  • Uncomment each Slice one by one and determine if a specific Slice component is causing the memory problem.
  • If you are able to narrow down which component causes the error, is there anything special about that Slice? Does it have any unique logic?

angeloashmore avatar Jul 14 '23 07:07 angeloashmore