Mqx•3mo 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.•3mo 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"
  }
}

MqxOP•3mo 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“

MqxOP•3mo 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...•3mo 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

MqxOP•3mo 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•3mo ago

Can u share repro?

bpev•3mo 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

MqxOP•3mo 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

MqxOP•3mo 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