Svelte h2j not working with v4.

[theetherGit]

We are able to make a package but not able to make a build for preview or anthing. Check v3 and main branch of the project.

[theetherGit]

Svelte H2J is based on svelte compiler, which uses svelte compilers parse and walk api.

In svelte-v3 branch, you can find old version code. This version works perfectly no package error and build errors.
In main branch you will find code with svelte v4 which causes issue when we make build for production (pnpm build) it will break, and this breaks due to css-tree used by svelte for css styles.

My opinion, it is caused due to svelte dropped CJS maybe not sure as of now. I have been trying to find cause till now that's just what i think.

@jasongitmail For test just use

• pnpm build
  on both branches, you will know what's going on.
• On v3 you will be getting no issues.
• On v4 you will get

Error: Cannot find module '../data/patch.json'
Require stack:
- /Users/shivammeena/WebstormProjects/svelte-h2j/.svelte-kit/output/server/entries/endpoints/_server.ts.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at file:///Users/shivammeena/WebstormProjects/svelte-h2j/.svelte-kit/output/server/entries/endpoints/_server.ts.js:11565:15
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async analyse (file:///Users/shivammeena/WebstormProjects/svelte-h2j/node_modules/.pnpm/@sveltejs+kit@1.24.0_svelte@4.0.0_vite@4.4.9/node_modules/@sveltejs/kit/src/core/postbuild/analyse.js:83:16)
    at async MessagePort.<anonymous> (file:///Users/shivammeena/WebstormProjects/svelte-h2j/node_modules/.pnpm/@sveltejs+kit@1.24.0_svelte@4.0.0_vite@4.4.9/node_modules/@sveltejs/kit/src/utils/fork.js:22:16)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:290:10)
    at [kOnMessage] (node:internal/worker:301:37)
    at MessagePort.<anonymous> (node:internal/worker:202:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:731:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/shivammeena/WebstormProjects/svelte-h2j/.svelte-kit/output/server/entries/endpoints/_server.ts.js'
  ]
}

Node.js v18.12.1

You can try it, if you need any help, i'll available in the evening 9 PM IST (Sorry for this).

[jasongitmail]

There are two extensions on the file _server.ts.js. Could it be a tsconfig.json setting issue?

[theetherGit]

You can try with it but i didn't found it like that.

[jasongitmail]

The build error is due to the import on line 1 within src/lib/toReactElement.ts:
import { parse, walk } from 'svelte/compiler';

Steps I took:

1. First, I fixed the import within /routes/+server.ts to be import {toReactElement} from "$lib/toReactElement.js";
2. Entirely redefined toReactElement() to be able to rule it out:

export function toReactElement(htmlString: string): void {
  return;
}

and the build error still occurs.

3. And then commenting out line 1 within this file (e.g. import { parse, walk } from 'svelte/compiler';) allows it to build successfully. So it's related to the usage of this import, possibly within a server route context.

---

• You could ask in Discord to see if a core dev can help explain why this is.
• Have you considered compiling the Svelte component to HTML and submitting a feature request to Satori requesting for them to also accept HTML directly, instead of only JSX, to enable support for Svelte Kit and other frameworks? It'd simplify maintenance long term.

[theetherGit]

So it's related to the usage of this import, possibly within a server route context.

Yes, only in server context.

On client it works so we can do something with vite optimizations.

You could ask in Discord to see if a core dev can help explain why this is.

Already posted in svelte and kit ask

Have you considered compiling the Svelte component to HTML and submitting a feature request to Satori requesting for them to also accept HTML directly

Yes, but second thing came in mind was why did they chose jsx in first place? We can make a request but i doubt they will consider it as they didn't considered mdx support.

As of now we can implement this with html-satori and we can use Svelte Component rendering method till we find a suitable solution. I know it's not what we want but that's what we can approach for now till i found some better way. I'm looking for other possibilities.

[theetherGit]

@jasongitmail i think opening a issue on svelte/kit project will be better to get a solution for this.

[jasongitmail]

Yes, but second thing came in mind was why did they chose jsx in first place?

Because Vercel created Satori and came about when Vercel supported NextJS as the only framework. JSX is the right choice for a React-based project.

But now Vercel has hired Rich and others to work on SvelteKit, so now Vercel should have a different, new motivation for Satori to support all the frameworks that Vercel does--including SvelteKit.

[theetherGit]

Yes, but second thing came in mind was why did they chose jsx in first place?

Because Vercel created Satori and came about when Vercel supported NextJS as the only framework. JSX is the right choice for a React-based project.

But now Vercel has hired Rich and others to work on SvelteKit, so now Vercel should have a different, new motivation for Satori to support all the frameworks that Vercel does--including SvelteKit.

I'll try again vercel/satori#188

[jasongitmail]

I just posted on Satori to see if they would consider official support, given Vercel now supports SvelteKit vercel/satori#558

[theetherGit]

@jasongitmail please check svelte-v4 branch. It works but we have to add css-tree as dependency and a plugin which will inject css-tree to build. I'm checking with other things and will update other required changes.