usewaypoint/email-builder-js

unable to compile this in production mode because of renderToStaticMarkup

alvindivina08 opened this issue · 6 comments

alvindivina08 commented

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'
}

image

softlylove commented

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 commented

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 commented

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

Thanks a lot! ❤️

alvindivina08 commented

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

softlylove commented

Thanks a lot!

  • ❤️1
cohitre commented

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.

  • 👍2