Mqx•4w 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.•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•4w 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•4w ago

This is my template: https://github.com/JavaScriptPlayground/Template-SolidJS

GitHub

GitHub - JavaScriptPlayground/Template-SolidJS: Template for Fronte...

Template for Frontend development. Build a web page using SolidJS and Deno. - JavaScriptPlayground/Template-SolidJS

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•3w 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•3w ago

Can u share repro?

bpev•3w 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•3w ago

https://github.com/JavaScriptPlayground/Template-SolidJS

GitHub

GitHub - JavaScriptPlayground/Template-SolidJS: Template for Fronte...

Template for Frontend development. Build a web page using SolidJS and Deno. - JavaScriptPlayground/Template-SolidJS

Mqx•3w 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