render method 'svelte/server' too inflexible for emails, and non-page content #14120
Comments
|
Please provide a reproduction for the second point ("HTML emails") |
|
[Edited with fixed links] For sure: Code that calls it: https://github.com/CriticalMoments/CMSaasStarter/blob/47ba79bd86a97c26606fe5de5057a79a56089280/src/lib/mailer.ts logged error: |
This yields a 404 |
|
So i took a look at the linked PR...the problem is that you are trying to render the whole html and body in a svelte component and you are using The solution is quite simple imho: just remove the wrapper const result = render(Component);
const email = `<html lang="en"><head>${result.head}</head><body style="...">${result.body}</body></html>`; |
|
If that did work in Svelte 4, I think we should investigate making that work in Svelte 5, too. The given component is valid HTML, and if our validation thinks that it's invalid we need to adjust it to see "ok this seems to be a standalone thing" (maybe this needs to be an option on the render method? because in the common case you're not doing the full html document, only a part of it) |
|
Sorry about the broken links, fixed those! From reading this, sounds like you might fix HTML, but plaintext is out of scope (no extraneous |
Tbh I think we should add an hydratable false option for when you want to use svelte just as a templating language. |
|
@scosman can you provide the whole warning that you were getting? |
Ok i was able to figure it out by myself...we could probably prevent the warning on render...however the warning is actually right: we use @dummdidumm wdyt? |
|
Looks like you already found it, but full error here: FWIW I think it's a good warning, but there should be a flag to disable when someone knowingly wants to do it (hydrate=false like you suggested). |
Agree with this. As an example I am currently trying to make a svelte 5 port of react email and running into the same issue. Using this ugly hack to get around it at the moment. const originalConsoleError = console.error;
console.error = (message, ...args) => {
// Suppress ONLY the specific error message related to node_invalid_placement_ssr
if (typeof message === 'string' && message.includes('node_invalid_placement_ssr')) {
return; // Ignore this specific error, do nothing
}
// For any other error messages, call the original console.error
originalConsoleError(message, ...args);
};
const { body, head } = render(component, { props });
console.error = originalConsoleError; |
Describe the problem
I wrote the Svelte template https://github.com/CriticalMoments/CMSaasStarter and we are migrating it to Svelte 5.
One thing we use .svelte files for email templates for our mailer. I know it's not the intended use of svelte, but it seems weird to add a second templating system in a svelte project.
We use one template for plaintext and one for html of each email. Both worked fine in svelte 4 using Component.render. Both now have issues in svelte 5.
<!--[-->and<!---->which I need to strip manuallynode_invalid_placement_ssr: '<html>'because the email templates include html tags.Describe the proposed solution
Maybe a "raw" option on the new render method in 'svelte/server'? I'm open to any fix though.
If this is explicitly out of scope we could move to another template system, but again, would love to not have 2 in one project.
Importance
nice to have
The text was updated successfully, but these errors were encountered: