Half the time Maizzle.render() fails because of Tailwind on Vercel

[lperezdude]

• Maizzle Version: 4.0.2
• Node.js Version: 16.16.0

Issue is only happening on Vercel. The same code fails only 50% of the time.

Emails render just fine locally

ERROR Error: Failed to find 'tailwindcss/components' in [ /var/task, /var/task/src/css ] at /var/task/node_modules/@maizzle/framework/node_modules/postcss-import/lib/resolve-id.js:35:13 at async LazyResult.runAsync (/var/task/node_modules/@maizzle/framework/node_modules/postcss/lib/lazy-result.js:396:11) at async Object.module.exports [as toString] (/var/task/node_modules/@maizzle/framework/src/generators/output/to-string.js:36:18) 2022-07-30T15:49:43.537Z 993b0bfe-f142-4d39-938d-90d33c1833f7 ERROR Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Tailwind CSS compilation failed","reason":{"errorType":"Error","errorMessage":"Tailwind CSS compilation failed","stack":["Error: Tailwind CSS compilation failed"," at /var/task/node_modules/@maizzle/framework/src/generators/tailwindcss.js:113:15"," at async Object.module.exports [as toString] (/var/task/node_modules/@maizzle/framework/src/generators/output/to-string.js:36:18)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error: Tailwind CSS compilation failed"," at process. (file:///var/runtime/index.mjs:775:15)"," at process.emit (node:events:539:35)"," at emit (node:internal/process/promises:140:20)"," at processPromiseRejections (node:internal/process/promises:274:27)"," at processTicksAndRejections (node:internal/process/task_queues:97:32)"]} RequestId: 9353e9f7-721d-4408-9fde-717297aa5446 Error: Runtime exited with error: signal: segmentation fault Runtime.ExitError

[cossssmin]

What does your config that you pass to render look like?

[lperezdude]

The only thing i add is this beforeRender function. Im using the https://maizzle.com/starters/postmark starter.

[cossssmin]

Try passing the Tailwind CSS string to be compiled, and only pass @tailwind utilities

https://maizzle.com/docs/api#tailwind

By default the string is @tailwind components; @tailwind utilities and it looks like it can’t find the components.css

[lperezdude]

@cossssmin ok im trying this, thank you so much for the fast response and the help btw.

[lperezdude]

@cossssmin No, it still fails. The weird part is that it only fails 50% of the time on the server, and it never fails locally. is there any other server setting you could think of that could cause this behavior ?

[lperezdude]

This is the way you asked me to do it correct. just confirming.

[cossssmin]

Maybe it’s something about Vercel and either that Node version or something else in their setup, not sure. Tried making that async event synchronous? Doesn’t need to be async if you’re not awaiting anything, though it’d be strange if that was it…

[lperezdude]

@cossssmin you're right i was fetching data inhere but i moved that outside of the function. after taking the async off the function the same issue is still happening.

Im looking into my versions of node and the tailwind version im using.

[lperezdude]

No matter what i do i get the same issue. I tired changing my config to use a a css file that doe snot request component, and i still get the components issue. Also idk if i was just tripping when i reported but now the issue happens 100% of the time but only on vercel server. Locally maizzle works beautifully

[micahbrich]

Oof, I have to second this one — I can't figure out how to get this running programmatically on Vercel.

When it's maizzle.env is set to local, I see the above error and have not been able to figure out what to do about it.

When I set maizzle.env to production, I see:

Error: could not load config.production.js
    at Object.getMerged (/var/task/node_modules/@maizzle/framework/src/generators/config.js:26:15)
    at Object.module.exports [as toString] (/var/task/node_modules/@maizzle/framework/src/generators/output/to-string.js:20:35)
    at Object.render (/var/task/node_modules/@maizzle/framework/src/functions/render.js:3:48)
    at render (/var/task/.next/server/pages/api/maizzle/[id].js:429:46)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async __WEBPACK_DEFAULT_EXPORT__ (/var/task/.next/server/pages/api/maizzle/[id].js:568:16)
    at async Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils/node.js:184:9)
    at async NextNodeServer.runApi (/var/task/node_modules/next/dist/server/next-server.js:381:9)
    at async Object.fn (/var/task/node_modules/next/dist/server/base-server.js:491:37)
    at async Router.execute (/var/task/node_modules/next/dist/server/router.js:213:36)

I suspect this could be fixed by something mentioned in another issue about not relying on the config.production.js file if you pass in a custom config. Is there a way to do that, or is that just how it's built at the moment?

[lperezdude]

UPDATE - I was unable to get Maizzle.render to work on Vercel server. I event tried out the box in case my configs were the issue but still no luck. INSTEAD - Im run maizzle build production locally locally (for the styles) then I push the HTML file with the css already compiled to github and i use string replace to do transactional data on the emails.

[micahbrich]

Update on my end, too — I forked it, and tried to massage some of the file configs out of the process, and got it working on Vercel, I think. Need to test more but initially it's working with these changes: https://github.com/maizzle/framework/compare/master...micahbrich:maizzle-framework:remove-config-file-dependency

I think it just comes down to the fact that Vercel moves files in the build process, so expecting files to be in certain places breaks.

[cossssmin]

OK, so looking at your changes we'll need to fix the following when using Maizzle programmatically:

• rethink the way we compute the config (avoiding file paths - also see https://github.com/maizzle/framework/issues/717#issuecomment-1174938129)
• not use postcss-import / support passing in CSS that has @import ... in it, as that also uses file paths

Both are fixable, but just like #717 will have to wait for the next major release as they'll introduce breaking changes.

[cossssmin]

OK I think we might get away with fixing this and not introducing a breaking change, will release a patch tomorrow 🤞

[cossssmin]

Released 4.2.1, give it a try:

https://github.com/maizzle/framework/releases/tag/v4.2.1