search

denoland / fresh

The next-gen web framework.
https://fresh.deno.dev
MIT License
12.18k stars 623 forks source link

Using with chakra-ui (css in js) #629

Open kstulgys opened 2 years ago

kstulgys commented 2 years ago

How do I use chakra-ui with "fresh" ? Chakra ui has deps: @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 https://chakra-ui.com/getting-started

How do I use it with fresh? I manage to make mui work with fresh with this line: import { Button } from "https://esm.sh/@mui/material@5.10.1?alias=react:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime&deps=preact@10.10.0" mui uses same deps as chakra-ui - @emotion/react and @emotion/styled https://mui.com/material-ui/getting-started/installation/

crispinb commented 1 year ago

It's working for me with this in my import map: "@chakra-ui": "https://esm.sh/@chakra-ui/react?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat" (though 'working' is a low bar as this is just for a toy playing-with-Fresh project. It gets ChakraUI components rendering, but haven't tried much with them yet)

imadha commented 1 year ago

Tried @crispinb's import URL and ran into this error: 

TypeError: Cannot read properties of null (reading '__H')

Turns out that's common when there are multiple versions of preact being loaded. Fixed this by adding in a deps param to my import url to make sure the preact version matched the one that was in my import_map.

Ends up looking like 

"@chakra-ui/react": "https://esm.sh/@chakra-ui/react?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&deps=preact@10.11.0"

Which has worked for me so far. Hope this helps!

vinaybedre commented 1 year ago

You can also use "https://esm.sh/@chakra-ui/react@2.4.9?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime&deps=preact@10.11.0"

In either case, I still get a warning.

▲ [WARNING] This case clause will never be evaluated because it duplicates an earlier case clause [duplicate-case]

    deno:https://esm.sh/v104/@motionone/dom@10.15.5/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdCxyZWFjdC1kb206cHJlYWN0L2NvbXBhdCxyZWFjdC9qc3gtcnVudGltZTpwcmVhY3QvY29tcGF0L2pzeC1ydW50aW1lLHJlYWN0OnByZWFjdC9jb21wYXQKZC9wcmVhY3RAMTAuMTEuMA/deno/dom.js:2:7271:
      2 │ ...ase"currentTime":n=Ut.ms(n);case"currentTime":case"playback...
        ╵                                ~~~~

  The earlier case clause is here:

    deno:https://esm.sh/v104/@motionone/dom@10.15.5/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdCxyZWFjdC1kb206cHJlYWN0L2NvbXBhdCxyZWFjdC9qc3gtcnVudGltZTpwcmVhY3QvY29tcGF0L2pzeC1ydW50aW1lLHJlYWN0OnByZWFjdC9jb21wYXQKZC9wcmVhY3RAMTAuMTEuMA/deno/dom.js:2:7242:
      2 │ ...)}},set:(t,e,n)=>{switch(e){case"currentTime":n=Ut.ms(n);ca...

Picked this up from @kstulgys 's message above. @imadha Did you got onClick on a Button work? I can see UI loads, but onClick events defined are not being hydrated.

vinaybedre commented 1 year ago

I created a follow up issue at https://github.com/denoland/fresh/issues/998 which contains a link to sample repo which replicates the problem.