Mqx
Mqx4w ago

Using SolidJS with Deno

Hey I am currently trying to set up a template for SolidJS development with Deno and I am unable to figure out how to set the deno.json configuration correctly. Especially the compilerOptions. Can someone please give me an example on how to setup the JSX stuff? I am always getting errors that my config is invalid. Thanks.
9 Replies
marvinh.
marvinh.4w ago
The solid framework is based around their own JSX transpilation pipeline. They have a couple of babel plugins that they add to vite. This style of JSX transpilation is not part of Deno itself, so the JSX should be left as preserved.
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js"
}
}
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js"
}
}
Mqx
Mqx4w ago
When I use it like that I get an error saying that „preserve“ is not a valid option for „jsx“. But I only get the error in combination with „jsxImportSource“
Mqx
Mqx4w ago
GitHub
GitHub - JavaScriptPlayground/Template-SolidJS: Template for Fronte...
Template for Frontend development. Build a web page using SolidJS and Deno. - JavaScriptPlayground/Template-SolidJS
loading...
loading...4w ago
don't know if it still works but Pichu did make this https://github.com/LePichu/solidjs-deno-example
GitHub
GitHub - LePichu/solidjs-deno-example: Example showing how to use S...
Example showing how to use Solid.js using Deno as the core runtime instead of Node. - LePichu/solidjs-deno-example
Mqx
Mqx4w ago
Thanks I will check that out 👍🏻 I think I found the problem. The jsxImportSource option inside the deno.json does not allow/work with aliases from the import map. It requires the direct link. That was my problem. Only problem now are the types…
Type 'import("https://esm.sh/v135/solid-js@1.8.22/h/jsx-runtime/types/jsx").JSX.Element' is not assignable to type 'import("https://esm.sh/v135/solid-js@1.8.22/types/jsx").JSX.Element'.
Type 'ArrayElement' is not assignable to type 'Element'.
Type 'import("https://esm.sh/v135/solid-js@1.8.22/h/jsx-runtime/types/jsx").JSX.Element' is not assignable to type 'import("https://esm.sh/v135/solid-js@1.8.22/types/jsx").JSX.Element'.
Type 'ArrayElement' is not assignable to type 'Element'.
The Build step using ESBuild works fine and it also renders correctly but it does not increment the counter value in the button.
fro.profesional
Can u share repro?
bpev
bpev4w ago
fwiw if you're just doing client-side rendering with esbuild and typescript, I have a few projects using that pattern you could check against. mmm I think this is the easiest one to share / simplest to read: https://github.com/bpevs/japanese.bpev.me specifically, build.ts is the magic file
Mqx
Mqx4w ago
GitHub
GitHub - JavaScriptPlayground/Template-SolidJS: Template for Fronte...
Template for Frontend development. Build a web page using SolidJS and Deno. - JavaScriptPlayground/Template-SolidJS
Mqx
Mqx4w ago
Got it working now! Problem was that I didn’t used the npm prefix on the „jsxImportSource“ but used esm.sh instead what lead to different types