Deno•16mo ago•

13 replies

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.

marvinh.•9/13/24, 9:35 AM

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•9/13/24, 10:52 AM

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•9/13/24, 10:53 AM

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...•9/13/24, 10:30 PM

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•9/16/24, 5:09 AM

Thanks I will check that out

MqxOP•9/16/24, 6:08 AM

I think I found the problem. The jsxImportSourcejsxImportSource option inside the deno.jsondeno.json does not allow/work with aliases from the import map. It requires the direct link. That was my problem.

MqxOP•9/16/24, 6:26 AM

Only problem now are the types…

MqxOP•9/16/24, 6:38 AM

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

MqxOP•9/16/24, 1:42 PM

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•9/16/24, 4:21 PM

Can u share repro?

bpev•9/17/24, 1:03 AM

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

Ffro.profesional Can u share repro?

MqxOP•9/17/24, 12:40 PM

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•9/17/24, 1:20 PM

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

Using SolidJS with Deno

Similar Threads

Similar Threads

Similar Threads