Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error: Component.render(...) is no longer valid in Svelte 5 #34

Open
mmailaender opened this issue Feb 25, 2024 · 9 comments
Open

Error: Component.render(...) is no longer valid in Svelte 5 #34

mmailaender opened this issue Feb 25, 2024 · 9 comments

Comments

@mmailaender
Copy link 

Error: Component.render(...) is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
    at Invite.render (/workspace/Test/src/lib/emails/invite.svelte:142:8)
    at Module.render (/workspace/Test/node_modules/.pnpm/[email protected]/node_modules/svelte-email/render.js:6:14)
    at GET (/workspace/Test/src/routes/api/auth/organization/invite/+server.ts:27:25)
    at Module.render_endpoint (/workspace/Test/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/endpoint.js:43:24)
    at resolve (/workspace/Test/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:443:23)
    at async Module.respond (/workspace/Test/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/respond.js:319:20)
    at async file:///workspace/Test/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:524:22

Svelte Docs: https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes-server-api-changes

Problem location: https://github.com/carstenlebek/svelte-email/blob/master/src/lib/render.ts#L19
This was referenced Mar 5, 2024
Open
Open
@robthepaper
Copy link

Hi there, had same issue,
don't know if it's the right way to do but here is the workaround to render in Svelte 5.

instead of this code for example :

import { render } from 'svelte-email'
const html = await render({
     template: template
})

I use this one :

//import { render } from 'svelte-email'
import { render } from 'svelte/server'

// === Render with props
//const rendered = await render(template, { props: { otp: '333' } })

// === Render
const rendered = await render(template)

const html = rendered?.html

@robthepaper
Copy link

robthepaper commented Aug 8, 2024 •
edited
Loading

If anyone has a good function to convert nicely to plainText...

EDIT: nevermind, just saw the import { convert } from 'html-to-text'; in the render.ts file :)

@Erim32
Copy link

Erim32 commented Aug 21, 2024 •
edited
Loading

Any update ?

=> https://github.com/SvelteLaunch/svelte-5-email/blob/0e3205280b5a7183834d33e6aa243d01734493e7/src/lib/render.js#L10

@valterkraemer
Copy link

valterkraemer commented Oct 28, 2024 •
edited
Loading

My workaround based on @robthepaper's workaround, and the implementation in render.ts.

import type { Component, ComponentProps, SvelteComponent } from "svelte";
import { convert } from "html-to-text";
import { render } from "svelte/server";

const renderAsPlainText = (markup: string) => {
  return convert(markup, {
    selectors: [
      { selector: "img", format: "skip" },
      { selector: "#__svelte-email-preview", format: "skip" },
    ],
  });
};

export const renderEmail = async <
  Comp extends SvelteComponent<any> | Component<any>,
  Props extends ComponentProps<Comp> = ComponentProps<Comp>,
>(
  component: Comp,
  props?: Props,
) => {
  const rendered = render(component as any, {
    props,
  });

  const doctype =
    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';

  const html = `${doctype}${rendered.body}`;

  const text = renderAsPlainText(rendered.body);

  return {
    html,
    text,
  };
};

Looking at the HTML output before and after looks quite similar.

@Rar9 Rar9 mentioned this issue Nov 11, 2024
Open
@lamungu
Copy link

lamungu commented Nov 27, 2024

I can confirm with @valterkraemer's fix the package runs well on Svelte 5

@carstenlebek would it be possible to get an update on the package to allow users to use it on the new version? I've made a fork which details the fixes provided in the thread.

@7haveeen
Copy link

I can confirm with @valterkraemer's fix the package runs well on Svelte 5

@carstenlebek would it be possible to get an update on the package to allow users to use it on the new version? I've made a fork which details the fixes provided in the thread.

Any idea why the fix hasn't been released

@cdemi
Copy link

cdemi commented Feb 6, 2025

@carstenlebek do you think you can review and merge these changes?

@natashafenech
Copy link

@carstenlebek would it be possible to take a look at this fix?

@cdemi
Copy link

cdemi commented Feb 7, 2025

@lamungu would you consider forking this project and taking over as maintainer, since you already did the fix? It looks like this project has been abandoned; last commit is 2 years old and the maintenaer is unresponsive.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@robthepaper @lamungu @valterkraemer @cdemi @Erim32 @natashafenech @7haveeen @mmailaender