500 error on initial load in next.js app and 'edge' runtime

Bugs
1

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?

Thanks,
Nikola

2

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,

1 Like
3

Thanks for the response!

I hope you are going to find a solution.

Regards,
Nikola

4

@manish-sharma any updates on this one?

5

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.

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). 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

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 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.

Best regards,