search

KyleJune / deno-tailwind-ui-react-example

An example of how you can use Tailwind UI and React with Deno
20 stars 5 forks source link

Upgrade deps and use skypack #1

Closed KyleJune closed 2 years ago

KyleJune commented 2 years ago

Not merging this yet because I get a bunch of errors in tsx files when opening the example in visual studio code. The packup and twd commands work though.

The error I get in visual studio code says "JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.deno-ts(7026)". I do not get this error when using esm.sh but packup doesn't work with esm.sh modules.

index.html bundled in 5855ms when using skypack, it took 61419ms when using esm.sh but I get the error "TypeError: can't access property "useState", l3.current is null" in console when I go to http://localhost:1234.

I found that there is a year old issue that skypack pins react to 17.0.1 no matter what version you specify. If I switch esm.sh to using 17.0.1 for react and react-dom, the build only takes around 10 seconds instead of 60. But I get the error "Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings." in console when I got to http://localhost:1234.

The issue with skypack pinning to 17.0.1 has been around for over a year now. https://github.com/skypackjs/skypack-cdn/issues/88

I'm not sure what is causing issues for esm.sh.

elycheikhsmail commented 2 years ago

thank you @KyleJune I think the best solution will be vitejs under compat mode when it will be available. it may take more time for the first build but it will be more stable

KyleJune commented 2 years ago

This works with packup and twd and doesn't show any warnings in vs code. But the types issues mentioned previously along with an issue with react dom server renderToString for server side rendering. For my own projects I'm going to switch to using preact and wouter.

KyleJune commented 2 years ago

I ended up not switching to preact/wouter because I ran into issues with those modules as well. In later PRs I manually resolved all the issues related to react to get the example project working.