unable to compile this in production mode because of renderToStaticMarkup

[alvindivina08]

First of all, thank you for making this open source!

is there any alternative to renderToStaticMarkup for NextJS?

I keep getting this error when I'm trying to compile it to a production build using NextJs

(Use node --trace-deprecation ...to show where the warning was created)
   Collecting page data  .TypeError: (0 , d.createContext) is not a function
    at 89934 (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/chunks/2076.js:94:11183)
    at __webpack_require__ (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/webpack-runtime.js:1:161)
    at 23688 (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:13235)
    at __webpack_require__ (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/webpack-runtime.js:1:161)
    at __webpack_exec__ (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:15994)
    at /Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:16046
    at __webpack_require__.X (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/webpack-runtime.js:1:1707)
    at /Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:16007
    at Object.<anonymous> (/Users/alvindivina/Documents/GitHub/webcommerce/.next/server/app/api/trpc/[trpc]/route.js:3:16089)
    at Module._compile (node:internal/modules/cjs/loader:1368:14)
unhandledRejection Error: Failed to collect page data for /api/trpc/[trpc]
    at /Users/alvindivina/Documents/GitHub/webcommerce/node_modules/next/dist/build/utils.js:1211:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}

[softlylove]

I encountered the same error when running inside Next.js (latest version).

After adding "use client" on the top of the tsx file which includes renderToStaticMarkup(CONFIGURATION, { rootBlockId: 'email-builder-root' });, new error encountered:

TypeError: Cannot read properties of undefined (reading 'Component')

> 14 |   const string = renderToStaticMarkup(CONFIGURATION, { rootBlockId: 'email-builder-root' });

I have tried to work with renderToStaticMarkup (from react/server) and it works great, but I have no idea how to continue debugging..

[alvindivina08]

I created an api that separates renderToStaticMarkUp from the next js main codebase. Now my app works fine and calls an api if it needs to convert json to html

[softlylove]

Hi @alvindivina08, is it possible to share some details on how to resolve this issue?

Thanks a lot! ❤️

[alvindivina08]

I have it in my repo and deployed it using vercel. Feel free to take a look and copy it

[softlylove]

Thanks a lot!

[cohitre]

I remember us having this issue in the early days of the project and we fixed it in this PR https://github.com/usewaypoint/email-builder-js/pull/91/files that uses react-dom/server as a peer dependency and wraps with this function https://github.com/usewaypoint/email-builder-js/blob/1245bdac807e0989babcd4b2db1bc3a2a3bbf376/packages/email-builder/src/renderers/renderToStaticMarkup.tsx

That PR seemed to solved this issue for a couple of people.