usewaypoint / email-builder-js

A free and open-source block-based email template builder.
https://emailbuilderjs.com
MIT License
308 stars 92 forks source link

unable to compile this in production mode because of renderToStaticMarkup #116

Open alvindivina08 opened 1 month ago

alvindivina08 commented 1 month ago

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 1 month ago

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 1 month ago

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 1 month ago

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

Thanks a lot! ❤️

alvindivina08 commented 1 month ago

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

softlylove commented 1 month ago

Thanks a lot!