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.

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

Svelte h2j not working with v4. #2

Closed
theetherGit opened this issue Sep 30, 2023 · 10 comments
Closed

Svelte h2j not working with v4. #2

theetherGit opened this issue Sep 30, 2023 · 10 comments

Comments

@theetherGit
Copy link
Collaborator

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
Copy link
Collaborator Author

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
Copy link

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

@theetherGit
Copy link
Collaborator Author

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

@jasongitmail
Copy link

jasongitmail commented Oct 1, 2023

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.

  1. 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
Copy link
Collaborator Author

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
Copy link
Collaborator Author

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

@jasongitmail
Copy link

jasongitmail commented Oct 2, 2023

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
Copy link
Collaborator Author

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
Copy link

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

@theetherGit
Copy link
Collaborator Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants