solid-jsx not working

[glass laurel]

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/sid/my-app/node_modules/@mdx-js/rollup/index.js from /ho
me/sid/my-app/vite.config.js not supported.

@plain flame any idea?

my vite config

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

import mdx from "@mdx-js/rollup";

export default defineConfig({
  plugins: [solidPlugin(), mdx({ jsxImportSource: "solid-jsx" })],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
});

[left hill]

Have you got "type": "module" in your package.json?

[glass laurel]

oh cool the error is gone now!

[left hill]

Feel free to close this thread if your query is resolved. Perhaps open another one if you have a different question.

[plain flame]

Thanks, @left hill . There's a section dedicated to this in the beginning of the README file,
Use mdx or xdm with solid-js.

This module is ESM only, due to mdx and xdm being ESM only.

Adding

"type": "module"

in package.json is one option.

[glass laurel]

i tried this but i get some postcss error now

[plain flame]

Well, if your project is a module, you need to be explicit

it's postcss.config.cjs if you are writing common JS

Or use a more modern syntax and postcss.config.js or mjs

[glass laurel]

i renamed the file and i get this error now

[plain flame]

It's the same issue.

You really need to read 😄 these error messages.

Just name it tailwind.config.cjs

If something uses module.exports..., it's cjs

[glass laurel]

oh

[glass laurel]

i changed the syntax for both the files but i get the same error!

[plain flame]

You can use export default for tailwind and postcss, if you prefer that

What did you do exactly?

[plain flame]

If your files are using module.exports, name them .cjs

[glass laurel]

renaming both of them to cjs works!

thanks

[plain flame]

It's not that renaming works, it's that you're confused with cjs and mjs syntax, and you have every right to be...

It's an issue inherited from common js modules used by Node before the proper JS module specification

So, I recommend that you use those only when nothing else works

[plain flame]

This one would work if it was named tailwind.config.mjs

postcss needs imports there

If you're using vite, I don't think you need postcss

I think you probably are

Try unocss https://github.com/unocss/unocss

Also

It's faster than tailwind, and has a better VSCode plugin, IMHO

There's a sample repo which demonstrates solid SVG clock here

https://github.com/high1/solid-clock

Uses unocss, Vite, TypeScript

There's also ESLint config

Could be a nice start if you're not too far along

Yeah, Prettier also

[glass laurel]

faster in build time?

also i dont use vscode so the vscode plugin wont matter to me :p

[plain flame]

It has a faster engine, and has all the optimizations that Tailwind has

[glass laurel]

does it have a lsp?

[plain flame]

Don't think so

And you don't need to mess with postcss

Unless you really need to

[glass laurel]

https://github.com/xna00/unocss-language-server

ok i can use this with neovim!

[plain flame]

You're on your own there

[glass laurel]

dont worry about that, ive used custom lsps in neovim before

[plain flame]

If you have ESLint and Prettier working in Neovim, I'd be curious too see that

[glass laurel]

that works since ages lul

[plain flame]

Typescript type check also?

[glass laurel]

yes

tsserver works in neovim

so almost all vscode lsps will work in neovim too

https://github.com/neovim/nvim-lspconfig

[plain flame]

Hm, I would really love to have my setup from solid-clock repo transfered to neovim

[glass laurel]

i install all the lsp/formatter/linter/debugger etc binaries from mason.nvim plugin

incase you're curious about my config, this is it https://github.com/NvChad/NvChad 😄

[plain flame]

Huh, it's a world for itself...

Not sure if I want to dive that deep inside

[glass laurel]

you dont have to start from a full blown config first

make your own

https://www.youtube.com/watch?v=stqUbv-5u2s&ab_channel=TJDeVries

or https://www.youtube.com/watch?v=w7i4amO_zaE&ab_channel=ThePrimeagen

btw can I use unocss classes in css files?

i do it a lot with tailwind

[plain flame]

Yes, there's apply also

https://github.com/unocss/unocss/tree/main/packages/transformer-directives

Your config should be working OOTB, unless you're using typography preset

[glass laurel]

wew looks cool! will try it out 😄

[plain flame]

Only things that you will need to do is move theme config from theme: { extend: { ... } } to just theme: { }

And to uno.config.ts file

[glass laurel]

thx i'll do the change today!

btw how do i highlight the code tags which are in the jsx generated by solid-jsx?

i tried using prism-js but didnt work

[plain flame]

You can check out how it's done on solid-js site - there are other things you need to set for code highlightning

[glass laurel]

solid-js site uses solid-jsx?

[glass laurel]

ive used highlightjs with solid-marked before,worked fine

this works but there's 1 sec delay 😦

without settimeout it doesnt work

createEffect(() => {
    document.querySelectorAll("pre code").forEach((el) => {
      console.log(el)
    });
  });

that doesnt print anything, doesnt createEffect run after component has been rendered?

[glass laurel]

with solid-marked, i was able to set highlight to code elements after they rendered

[plain flame]

You're not doing it correctly.

Solid-site uses solid-mdx, but it doesn't matter what's used since this is a matter of mdx-js configuration.

[glass laurel]

hmm then how do I add the highlight stuff to all code elements at compile time?

is it possible?

[plain flame]

It is, it works that way on solid-site

import rehypeHighlight from 'rehype-highlight';

Do you have that in your mdx-js config?

[glass laurel]

no

[plain flame]

I told you to look at the code. ma 😄

rehypePlugins: [rehypeHighlight],
}),

[glass laurel]

didnt know there was a mdx-js config!

whats the difference between solid-mdx and solid-jsx?

[plain flame]

There is - you should read the festive manual

😄

[glass laurel]

i tried from the solid-jsx readme, couldnt find anything syntax highlight related 🤔

[plain flame]

The difference is that solid-jsx works over jsx function and fixes some of the issues that you can encounter due to solid differently dealing with elements than react

solid-mdx just precreates and exports basic components, so that they are there when imported

The difference is also that solid-mdx compiles to jsx, and that jsx goes through solid, so if you have a component inside mdx itself, it would be reactive.

But why would you write a component inside mdx, I'm not sure.

[glass laurel]

wew thx just including this worked!

[plain flame]

you could have issues when building

The instructions for highlight plugins are not in solid-jsx docs, it belongs to @pale slatex-js

[glass laurel]

also does rehype provide a css file for the syntax classes?

[plain flame]

You can have custom theming

there's hljs.css on solid-site

[glass laurel]

is there a default one?

[plain flame]

You could basically download a custom theme, and just add that to your css

I'm not sure about the defaults...

[glass laurel]

oh no wonder my previous theme file from highlight.js worked 😄

[plain flame]

yep

https://github.com/solidjs/solid-site/blob/main/src/assets/hljs.css

Here's what solid uses

There's also some theming there for markdown prose

That you don't need

[glass laurel]

btw @plain flame is it possible to run code whenever the elements in outlet from solidjs-router change?

or at route change

[plain flame]

It should be

[glass laurel]

this works

but if i remove printing of location.pathname then it stops working

cant i include location.pathname in array of createeffect?

[plain flame]

Yes, because the effect does not know that it should run

you could use on

createEffect(on(() => location.pathname, { your code ... }));

If you need to explicitly depend on something

But that almost always points that you're not doing it right

[glass laurel]

oh solid's createEffect works differently

[plain flame]

How do you mean differently? It works exactly as it should, unlike React ones 😄

effects knows their deps, and rerender accordingly

[glass laurel]

i assumed it'd had that array of dependencies too, like react 😄

[plain flame]

Read the festive docs

There's no array of deps, and components do not rerender, in fact, they dissappear

There's quite a bit to process, I'll give you that

[glass laurel]

i did before, its easy to forget when I work with react/solid on the same day!

[plain flame]

Yep,

[glass laurel]

you sure this is the right syntax?

[plain flame]

Not 100% percent, but it's there

[glass laurel]

or On's a function in solidjs module?

[plain flame]

You need to import on, first

yep

https://www.solidjs.com/docs/latest/api#on

[glass laurel]

i imported it, i get the same error

[plain flame]

Your code also needs to be a function

on(() => location.pathname, () => { ... })

[glass laurel]

oh got it, i was using your previous code. thx for all the help!

[plain flame]

np, keep on pushing...

[glass laurel]

btw solid-js compiles all the jsx stuff to vanilla js right? then why is it not a devdependency?

i put it and solid-router as devdependcy, it still works :0

[glass laurel]

tried out unocss today, its quite fast!

but i dont get any completions at all in vscode ( installed unocss extension )

however i do get some completions in neovim

[glass laurel]

where vscode shows no completions at all :/

[glass laurel]

nvm i give up man

tailwind might be bloated as compared to this but it has a good community support & lsp too

[glass laurel]

nvm fixed it

this doesnt work

btw @plain flame can i select multiple child elements with unocss?

and the same thing works on the playground

my unoconfig contains the same presets as the playground btw

import transformerAttributifyJsx from "@unocss/transformer-attributify-jsx";

import {
  defineConfig,
  presetAttributify,
  presetUno,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
  ],
  transformers: [
    transformerAttributifyJsx(), 
  ],
});

[plain flame]

same as you would do it in tailwind

I think there's group-focus, group:hover

etc.

[glass laurel]

[&>*:bg-red] doesnt work at all

but [&>*]:bg-red works in the playground

[plain flame]

Not sure about custom selectors

If it doesn't work, there's a special rule in the playground for that, you just need to copy it inside your config

The rules are basically regexes

Most of the time, you can just add things that you need

[glass laurel]

no such rule in the playground config

[plain flame]

Then it must work in your code also

[glass laurel]

it doesnt, thats why i asked it here

[plain flame]

I would need to see your config

[glass laurel]

here

  <div bg-lime p-5 class="[&>p]:bg-red">
      <p> kek</p>
    </div>

[plain flame]

Not sure why that doesn't work

Where's the playground link?

Also, I'm noticing that it's not underlined, so uno is not recognising it

[glass laurel]

https://uno.antfu.me/play/?html=AQ4HgEwSwN2AjA5gWgDZQLYFNgAdkCswAxqgIYDOFAvAEQDaAZAHy4C6AXEsgE5YS1mAKFCgwuYaNEBrLNIDuIqWAD0EpSFXQYzIA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAKq4IlAL5wsUCCDgByLpIDGdOsqRIMAD0ix02AIZcANvEw58REsFIAKZMNoMYdAFxwA2lTdRGAkIJwBKIVRqd0YWNk4ePn5wyIBdJGkwpCA&options=N4IgLgTghgdgzgMwPYQLYgFwKgGzgUwF8g

[plain flame]

You see that the rule is not recognized?

It's not underlined

[glass laurel]

yep then why does it work?

[plain flame]

Uno does not recognize it

You'll have to look or ask on their GitHub for arbitrary selectors syntax, haven't used it

But bg-lime and p-5 are underlined

So, you see that these are recognized

Your arbitrary selector is not

[glass laurel]

yes

[plain flame]

Why does it work in that specific case, I don't know

It's something with the playgrond

But it's not recognized and it will not work

[glass laurel]

is there any other way through which i could select? like selecting all p elements in parent div

[plain flame]

This works for me

It will be underlined

[glass laurel]

oh doesnt work locally for me ://

do i need a preset for this?

[plain flame]

You don't it's arbitrary

[glass laurel]

ughh man then what could go wrong

[plain flame]

It works for me

[glass laurel]

:((

[plain flame]

With auto completion

Now I'm not aware of the syntax for those, but you can always ask

[glass laurel]

can you check if it works on this project? the starter project is very minimal ( just for testing )

[plain flame]

Can't you put that on code sandbox or

[glass laurel]

Ok lemme try

[glass laurel]

https://codesandbox.io/s/weathered-bush-nhq6ov?file=/src/index.jsx

[plain flame]

So, it's a bug in solid

Solid

https://stackblitz.com/edit/github-prvqmz?file=src%2FClockFace.tsx

Voby

https://stackblitz.com/edit/github-hnrwfp?file=src%2FClockFace.tsx

Svelte

https://stackblitz.com/edit/github-4lynj1?file=src%2FClockFace.svelte

So, looks like an issue in Solid to me

That's one downside -this custom JSX transformation causes issues sometimes, the another one is no destructuring...

[glass laurel]

oh :((

[plain flame]

You can open an issue, though

It'll be fixed in 1.6.7, I hope

[valid coral]

oop nvm I see what you mean

[glass laurel]

done

[glass laurel]

also custom classes dont work on break points

for example

.custom-div {
  @apply text-center bg-red;
}

lg:custom-div

this doesnt work like that of in tailwind

to test this you need transformers-directives https://github.com/unocss/unocss/tree/main/packages/transformer-directives

[plain flame]

huh, that's not good...

But that's an issue in unocss, right?

@glass laurel, I've tried, but tailwind also does not apply custom classes on breakpoints, at least not on their playground

https://play.tailwindcss.com/UZRQoYg5k7?size=1028x729

[glass laurel]

yes most likely

[glass laurel]

it works for me, try this

@layer base {
  .custom-div {
    @apply flex text-yellow-500;
  }
}

https://play.tailwindcss.com/Al8x1BqSGf?size=1358x1035&file=css

[glass laurel]

@plain flame that wasnt a bug in solid, loading unocss plugin before solidplugin in vitejs config fixes this 😄

https://github.com/solidjs/solid/issues/1449#issuecomment-1366402147

[plain flame]

Hm, I don't see why would custom transform change the class string?