# 500 error on initial load in next.js app and 'edge' runtime **URL:** \ **Category:** Bugs\ **Tags:** nextjs\ **Created:** [September 3, 2024, 2:04pm UTC](https://forum.builder.io/t/500-error-on-initial-load-in-next-js-app-and-edge-runtime/6314 "2024-09-03T14:04:04Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![nikola](https://avatars.discourse-cdn.com/v4/letter/n/a88e57/32.png) [@nikola](https://forum.builder.io/u/nikola)\ **Post date:** [September 3, 2024, 2:04pm UTC](https://forum.builder.io/t/500-error-on-initial-load-in-next-js-app-and-edge-runtime/6314/1 "2024-09-03T14:04:04Z")
Hello, I have a bug where I am getting “500” error on the initial load of every page model. I am using next.js with ‘edge’ runtime. When I disable ‘edge’ runtime everything works fine. I see that there is an open GitHub issue also on your repo. Can you tell me if there is any solution for this yet? > > > \*\*Describe the bug\*\* > When running a Next.js app that renders \`BuilderComponent\`… from \`@builder.io/react\` I get the following error in the server console: > > \`\`\` > \- error TypeError: Cannot read properties of null (reading 'registered') > \`\`\` > > There is no additional information printed in the console, and the page in the browser seems to render correctly. This happens on any builder page I visit. > > I'm using a starter Next.js project with the Builder code taken straight from the documentation, and latest Builder SDK versions. > > \*\*To Reproduce\*\* > Steps to reproduce the behavior: > 1. Create a new Next.js project and configure it with Builder SDK > 2. Add \`export const runtime = 'edge';\` to the page with BuilderComponent > 3. Open a page that will render content from Builder > 4. Notice the error in the console > > \*\*Additional context\*\* > From package.json: > > \`\`\`json > "dependencies": { > "@builder.io/dev-tools": "^0.1.17", > "@builder.io/react": "^3.0.14", > "@builder.io/sdk": "^2.0.8", > "@cloudflare/next-on-pages": "^1.6.0", > "@types/node": "20.5.0", > "@types/react": "18.2.20", > "@types/react-dom": "18.2.7", > "autoprefixer": "10.4.15", > "eslint": "8.47.0", > "eslint-config-next": "13.4.18", > "next": "^13.4.19", > "postcss": "8.4.28", > "react": "18.2.0", > "react-dom": "18.2.0", > "tailwindcss": "3.3.3", > "typescript": "5.1.6" > }, > \`\`\` Thanks, Nikola ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [September 11, 2024, 12:35pm UTC](https://forum.builder.io/t/500-error-on-initial-load-in-next-js-app-and-edge-runtime/6314/2 "2024-09-11T12:35:29Z")
Hello @nikola, Thank you for reporting this possible issue. We were able to reproduce the error you encountered when using edge runtime with the nextjs 14 app router. We are currently discussing this issue internally to determine the next steps. We will make sure to keep you updated as we make any progress. Thanks, ---
**Author:** ![nikola](https://avatars.discourse-cdn.com/v4/letter/n/a88e57/32.png) [@nikola](https://forum.builder.io/u/nikola)\ **Post date:** [September 11, 2024, 3:34pm UTC](https://forum.builder.io/t/500-error-on-initial-load-in-next-js-app-and-edge-runtime/6314/3 "2024-09-11T15:34:28Z")
Thanks for the response! I hope you are going to find a solution. Regards, Nikola ---
**Author:** ![nikola](https://avatars.discourse-cdn.com/v4/letter/n/a88e57/32.png) [@nikola](https://forum.builder.io/u/nikola)\ **Post date:** [October 2, 2024, 12:00pm UTC](https://forum.builder.io/t/500-error-on-initial-load-in-next-js-app-and-edge-runtime/6314/4 "2024-10-02T12:00:02Z")
@manish-sharma any updates on this one? ---
**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\ **Post date:** [October 3, 2024, 8:50am UTC](https://forum.builder.io/t/500-error-on-initial-load-in-next-js-app-and-edge-runtime/6314/5 "2024-10-03T08:50:15Z")
Hello @nikola, Thank you for your patience as we continue to look into this issue. The problem you’re encountering is related to the `@emotion/core` package used within our Gen1 React SDK. Specifically, it seems to align with the following error: **TypeError: Cannot read property ‘key’ of null on SSR** This issue has been documented in the Emotion.js repository: [Issue #1728](https://github.com/emotion-js/emotion/issues/1728). There currently doesn’t seem to be a complete solution for this within Next.js (refer to: [Supporting Emotion and The Next.js Edge Runtime](https://github.com/vercel/next.js/issues/39229)). The root cause is that the browser-exported module of Emotion gets imported on the server side, which breaks since it’s meant for client-side use only in Next.js applications. While investigating this, we came across a potential workaround: wrapping `BuilderBlocks` with the `CacheProvider` from `@emotion/core`. This may resolve the error, but it would result in the loss of Server-Side Rendering (SSR) for styles using our current implementation, which could have performance implications. For reference, you can check out a similar implementation here: [next.js/examples/with-emotion/pages/\_app.tsx](https://github.com/vercel/next.js/blob/canary/examples/with-emotion/pages/_app.tsx) It’s also important to note that `@emotion/core` is no longer actively maintained. The more current and actively supported package is `@emotion/react`, which exports correct bundles for the edge runtime. If you’re considering a transition, I recommend switching to `@emotion/react` for better compatibility. Additionally, for customers using Edge + React SDK, we recommend migrating to the [Gen2 SDK](https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/react) for improved performance and support. Please let us know how you’d like to proceed. We’re here to help with the transition or answer any further questions you may have. > **[SDK Comparison - Builder.io](https://www.builder.io/c/docs/sdk-comparison)** > > Covers the differences between the Gen 1 and Gen 2 Builder Javascript framework SDKs. Includes package references, helpers, and fetching references and Symbols. Best regards,