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; |
This reverts #13255 / #13158, and helps with the validation error part of #14120 The revert is justified because people should be free to render a component in isolation and then append it somewhere where they know the rendered output is valid. If someone renders a tag at the top level that is invalid without a certain parent (which itself is an edge case), then the likelihood that this is done on purpose is much higher than that it's done by accident.
This reverts #13255 / #13158, and helps with the validation error part of #14120 If you would have a component like this... ```svelte <td>hi there</td> ``` ...and then render it on the server via our `render` function like this: ```js const result = render(Main); ``` ...then right now you get an error saying that `td` is not valid at this position. But that doesn't seem right, because we should give people the benefit of the doubt: It may very well be that someone renders such a component and then correctly puts it into a `tr` tag themselves on the server (another example is rendering a full html document like in #14120). All the other validation where there's a known parent (X not valid inside Y) is untouched by this. Doing this as cleanup prior to tackling #13331
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: