How to use Charka UI with Plasmic?

Developer Support
1

How would I go about using:
https://github.com/plasmicapp/plasmic/tree/master/plasmicpkgs/chakra-ui/src

Currently I have one big plasmic-host.tsx file holding all my old Chakra component registrations, as appose to this approach where there is all seperate files for each component with an index.ts.

Just not sure how to hook all this up into the plasmic-host.tsx which I need my project to point to.

@noble_lynx how did you end up doing this?

2

Hey @political_magpie! Install @plasmicpkgs/chakra-ui in your package.json and in your plasmic-init you can use:

import { registerAll } from "@plasmicpkgs/chakra-ui";

registerAll(LOADER);

That will register all components from that package (https://github.com/plasmicapp/plasmic/blob/master/plasmicpkgs/chakra-ui/src/index.ts#L207)

3

Couldn’t Install @plasmicpkgs/chakra-ui but could npm i @plasmicpkgs/plasmic-chakra-ui

4

In plasmic-init :

import { registerAll } from "@plasmicpkgs/plasmic-chakra-ui";
...
registerAll(LOADER);

But get error:
Cannot find name 'LOADER'.ts(2304)

5

works if I just use:
*registerAll*(); // for codegen users
But I’m using loader-nextjs so not sure why.
I now see this - awesome!

image.png
image.png357×934 54.3 KB

6

Now I just need to know how best to add to this component set. Like the Tag to start with, as it’s missing. Should I simply fork and contribute to the repo ( I’m a newbie - but keen).
@verbal_sparrow originally sent me all the Chakra registrations, and was unaware that you guys started work on this. He may also want to help some more.

7

Hi @political_magpie, you’ll want to pass it the “LOADER” that was defined in your project, I think it might be called something like PLASMIC

And contributions are always very welcome! That repo is in fact what @verbal_sparrow contributed, plus our own fixes to make certain things work.

8

OK. I now have

// plasmic-init.ts
export const PLASMIC = initPlasmicLoader({

and

//plasmic-host.tsx
import { registerAll } from "@plasmicpkgs/plasmic-chakra-ui"; 
...
registerAll(PLASMIC)

But get a ts(2345) error:
Argument of type 'NextJsPlasmicComponentLoader' is not assignable to parameter of type 'Registerable'.

In saying, all the chakra components appear using registerAll(PLASMIC) :sunglasses: (localhost)
But my Vercel deployment Errors:x:

image.png
image.png1333×277 69.9 KB

9

Again - I see components with either registerAll(PLASMIC) or registerAll() so a little confused why.

10

Can you try updating your plasmic related packages to the latest respective versions? Including the plasmic chakra package, plasmic loader, and any other plasmic packages (but I don’t think you should have any others present)

11

Hi @yang

Are these components usable when integrated in this way? At some point they were available as a component package in Studio but were later removed (most of the components had issues when I tried them)

Thanks

12

All updated latest:

"@plasmicapp/host": "^1.0.80",
"@plasmicapp/loader-nextjs": "^1.0.187",
"@plasmicapp/react-web": "^0.2.112",
"@plasmicpkgs/plasmic-chakra-ui": "^0.0.5",

Did get an error while updating loader-nextjs, so deleted node_modules, npm i and tried again. Now builds fine with registerAll(PLASMIC)
Thx @Yang from Plasmic
:tada:

Use to have a red dot next to Code button, and I think this went away once I updated.

13

All updated latest:

"@plasmicapp/host": "^1.0.80",
"@plasmicapp/loader-nextjs": "^1.0.187",
"@plasmicapp/react-web": "^0.2.112",
"@plasmicpkgs/plasmic-chakra-ui": "^0.0.5",

Did get an error while updating loader-nextjs, so deleted node_modules, npm i and tried again. Now builds fine with registerAll(PLASMIC)
Thx @Yang from Plasmic
:tada:

Use to have a red dot next to Code button, and I think this went away once I updated.