Issues with displaying dynamic components in Plasmic.

Plasmic Studio Questions
1

Hi…

I wanna ask a question which is so very important for most of us. Somehow plasmic have made it very painful for us developers to use different dynamic & csr code as components & use them within plasmic.

So I am using lowcoder to create apps fast & its a client side rendering system. I created a component using its SDK & registered it into plasmic.

As nextjs is a SSR it gave me window refrence errors so I used next/dynamic loading. Now the nextjs page doesn’t render or show it…

Non plasmic pages however render & show it.

Please provide me a solution fast.

Thanks!!!

2

it sounds like you might need a placeholder component

https://docs.plasmic.app/learn/code-component-substitution/

3

Hi @illuminating_egret, sorry I don’t follow, what is the issue?

4

Hi Yang,

So basically… what I am trying to do is

1st. I want to create & use components embedding dynamic & Custom Client Side Rendering apps/modules via their sdk’s & not iframe.
Then after registering those components in plasmic use those components as usual in plasmic but they don’t work. Also, If I place them in a seperate pages not created via plasmic, they work.

2nd. Create components which not only get registered in plasmic but also are compatible so they can be further edited via plasmic studio.

5

example of one such tool : https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/native-embed-sdk/embed-apps-in-react

6

@ also I am using Nextjs with Typescript!

7

Did you do the quickstart and get the hello world code component working?

8

Yep… I have been using plasmic for a while now…
…also starting from yesterday I am getting this error in all projects…

Module not found: Can't resolve '@plasmicpkgs/antd5/skinny/registerConfigProvider'
   7 | import * as React from "react";
   8 | import { hasVariant, ensureGlobalVariants } from "@plasmicapp/react-web";
>  9 | import { AntdConfigProvider } from "@plasmicpkgs/antd5/skinny/registerConfigProvider"; // plasmic-import: DmrLLHGTjGTE/codeComponent
  10 |
9

@illuminating_egret That error is because you’re using codegen and didn’t install the necessary packages for the built-in components you’re using. See https://docs.plasmic.app/learn/component-store-codegen/

10

If you have another error with your own code component, we can try to help if you can share what is the issue exactly

11

@illuminating_egret As you mentioned the lowcoder is a client-side rendering system. It might be using window object internally which would be causing the issue on the Nextjs SSR during hydration. I think the following will resolve it.

Add the window undefined check at the beginning of your code component, before returning the lowcoder component. It will supress the window reference error.

if(typeof window === 'undefined') return null
12

No it doesn’t fix it… I am aware of the window object that’s why I am using Next/dynamic load with SSR: false…

…

Also I have just started a New Project…

Installed Design System via left panel… & when I clone the Repo…

& run … npm run dev … It Gives me above error

13

See the above doc, you need to install the needed npm libraries

14

Already Done –

Actually what I am saying is… For some reason , Pages / Components with Dynamically loaded NeXTjs components doesn’t show or render.

Can You please Check… I am struggling with this for many days now.

15

… Also I fixed
Module not found: Can’t resolve ‘@plasmicpkgs/antd5/skinny/registerConfigProvider’

by running

npm i --save @plasmicpkgs/antd5
npm i --save @plasmicpkgs/antd

16

oh, thats helpful info for me; i’ve run into that problem a few times and wasn’t sure how to fix

17

@illuminating_egret could you share your registered component code?

And any details around which specific component from lowcoder you are trying with Plasmic?

18

Hey all … I finally Fixed it. Basically I wasn’t using props:className & even when i was using it .

I set the width to hug content.

as soon i switched to stech or some value in Px… Its showing now.

Thanks Everyone!

19

Great!

20

Thanks @alyssa_feola and @zonal_mammal for jumping in!